CSS动画总结

css动画与变形
    一、animations 动画的使用：
    1.定义关键帧
    @keyframes 自定义的名称{
        from{
            css的属性值、多个
        }
        to{
            css的属性值、多个 
        }
    }
 @keyframes username{
     0%{}
     20%{}
 }
   2.调用关键帧
   选择器{
       animation-name：user-defined-name;引入的关键帧
       animation-duration;3s动画的时长
       animation-*...
   }
    .one{
            /* 动画自己的默认状态、开始状态、结束状态 */
            animation-name: move;
            animation-duration: 4s;/*默认：0s*/
            animation-iteration-count: 3;/*重复*/
            animation-delay:2s;/*动画开始之前的延时，只会延时一次,自己的默认状态*/
            animation-direction: reverse;/*动画方向 默认值normal from-to,reverse倒叙 to-from,alternate 交替 from-to-from-to，alternate-reverse 反转交替：to-from-to-from*/
            animation-play-state: running;/*动画状态 与js搭配 pause:暂停*/
            animation-fill-mode: backwards;/*填充模式：延时动画结束的状态 默认值none自己的状态  forwords、backwards、both*/
            animation-timing-function: linear;/*在动画时长里的运动速度*/
        }
        .two{
            animation: change 3s;/*速写：动画名称 动画时长*/
            animation: change 3s 2s;/*速写：动画名称 第一个时间动画时长 第二个时间延时时间 其他位置随便写*/
        }
   二、 transitions过渡
 与animation的异同点：
 animation需要先定义在使用 可以同时对多个css属性进行修饰  页面加载就会生效 
 transitions直接使用，需搭配hover才能看到效果  单值  刚加载没效果  
 transition-property:CSS属性值/all；
 transition-duration：3s；过渡时长
 transition-delay：2s  过渡延时
 transition-timing-function:
 都可以搭配hover使用
 三、变形
  body>div:nth-child(1){
            transform: rotate(10deg);旋转
        }
        body>div:nth-child(2){
            transform: skew(x,y);倾斜
        }
        body>div:nth-child(3){
            transform: scale(x,y);缩放
        }
        body>div:nth-child(4){
            transform: translate(100px,200px);
        }
        transform-origin:中心变形