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 ;        }