01.transition,transfrom和animation

1. transition过渡动画
第一个值：需要过渡的属性 一般为all
第二个值：动画时间，一定要设置
第三个值：动画速度曲线，一般liner(匀速)
第四个值：延迟，一般不设置`

transition-property: all;
            transition-duration: 1s;
            transition-timing-function: linear;
            transition-delay: 3s; 

2. transform

2d
平移:transform：translate(x,y)
总结：
a. x:水平方向 y、：垂直方向
b.百分比单位相对于元素自身宽高
a.x:水平方向 y :垂直方向
b.百分比单位相对于元素自身宽高
例.transform: translate(100%,50%);

旋转: transform: rotate(deg)
a:只有一个值就是角度。 角度单位是deg
b. 正数：顺时针 负数：逆时针
transform: rotate(-45deg);
修改基准点:transform-origin:方位名词
修改元素基准点
left:左
right：右
bottom：下
top：上
缩放:transform:scale(0.5,3)
a.单位是数字，表示缩放比例
b. 放大： 大于1 缩小： 0 - 1
c. x:宽度缩放 y：高度缩放
d. 一个值表示宽高同时缩放

倾斜:transform: skew(x角度，y角度);
例: transform: skew(45deg,60deg);

• 3d
  如果某个元素想要显示3d效果，必须要给父元素设置视距属性
  视距：视觉的距离。浏览器用来模拟3d的z轴，相当于电脑屏幕到用户眼睛的距离
  一般范围：600px - 1000px
  规则：近大远小
  perspective: 800px;
  transform: translateX(100px) translateY(100px) translateZ(100px);

3.animation
/*transition动画弊端
a:无法自动执行动画（需要和hover配合）
b:只能一次（无法实现多次）

        步骤： 第一步：写hover样式
              第二步：写transition属性开始动画
    */

    /* animation帧动画
    animation帧动画
        a:自动执行动画
        b.可以多次

        步骤： 第一步：写动画样式
            animation帧动画步骤
        1.写动画运动状态
        @keyframes 动画名字 {
            from{开始样式}
            to{结束样式
            }
    
            @keyframes 动画名字{
                from{
                    开始样式
                }to{
                    结束样式
                }
            }
        2.写animation开始动画

     */

 /* 第一步：写动画样式 */
        @keyframes sb{
            from{/* 从什么状态开始 */
                transform: scale(1);
            }to{/* 结束状态 */
                transform: scale(2);
            }
        }


        .box{
            width: 200px;
            height: 200px;
            background-color: green;
            /* 第二步：通过animation属性开始动画 */
            /* animation-name: sb;
            animation-duration: 1s;
            animation-timing-function: linear; */
            animation: sb 1s linear;
        }
        
        

相同属性写两个，后者覆盖前者
/* transform: scale(2);
transform: translate(800px); */

• 百分比帧动画

/* 1.写动画样式 */
        @keyframes move{
            /* 百分比写法:相对于动画时间 */
            20%{/* 第一秒状态 */
                transform: translate(100px,100px) scale(0.5);
                opacity: 0.8;
            }
            40%{/* 第二秒状态 */
                transform: translate(200px,100px) scale(0.1);
                opacity: 0.2;
            }
            60%{/* 第三秒状态 */
                transform: translate(200px,300px) scale(0.8);
                opacity: 0.6;
            }
            80%{/* 第四秒状态 */
                transform: translate(50px,50px) scale(1);
                opacity: 0.8;
            }
            100%{/* 第五秒状态 */
                transform: translate(150px,150px) scale(2);
                opacity:1;
            }
        }
    
        .box{
            width: 200px;
            height: 200px;
            background-color: green;
            /* transition: move 5s linear forwards; */
            /* 复合属性写法 */
            animation: move 5s linear forwards;
        }