css3动画梳理

Css3动画 主要有3种：Transition、Transform 、Animation

Transition:对应属性 动画时间 效果 延迟时间 
多条属性相叠加用,号分开

.box1{

   width: 100px;

   height: 100px;

   background-color: red;

   transition:height 1s ease-in 0s;

 }

box1:hover{

  height:200px;

  transition:height 1s ease-in 1s,width 1s ease-in 0s;

}

Transform 

方式有scale（缩放），skew(倾斜),translate(移动)，rotate(旋转)，matrix，需要注意的是，多条动画叠加时，中间用空格分开，而不是逗号。

.box2{

   margin-top: 200px;

    width: 100px;

    height: 100px;

    background-color: blue; /*transform:translate(20px,40px);*/ transform:rotate(45deg); /*transform:scale(2,2);*/ /*transform:skew(-45deg,0) scale(2,2);*/ /*transform-origin:20% 20%;*/ transform-origin:left top;

}
Animation动画

@-webkit-keyframes animate1{

            0%{ width: 150px; }

            50%{ width: 200px; }

            100%{ width: 300px; }

        }

     .box3{ margin-top: 100px; width: 100px; height: 100px; background-color: green; /*infinite none normal */ 次数， 动画结束后的状态，循环方式，

-webkit-animation:animate1 2s linear 1s 3 forwards alternate ;

}

 灵活应用css3的动画特性能给页面增加亮点，也能提高工作效率，只是兼容性一直是浏览器的弊端。