css3动画效果

Css3动画
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 ;
        }