CSS动画

1.2D,3D转换

2D

• translate(位移) transform: translate(100px,100px);
• rotate(旋转) transform: rotate(275deg);
• scale(缩放) transform: scale(1,2);//一个参数时表示同时缩放该倍率
• skew(斜拉：绕X轴旋转，绕Y轴旋转)transform: skew(10deg,0deg);//一个参数时表示绕X轴旋转

3D

• rotateX()
• rotateY()

设置中心点位置

transform-origin: top left;//center，或是直接写坐标点px px

适配浏览器

.div2{
-webkit-transform: translate(100px,100px); /* safari chrome*/
   -moz-transform: translate(200px,100px); /* firefox */
    -ms-transform: translate(100px,100px);/* IE,360的内核也是IE */
     -o-transform: translate(100px,100px); /* opera */
        transform: translate(100px,100px);/* 不是所有浏览器都支持 */
}

matrix(a,b,c,d,e,f)

是所有变换的基础
教程上的解释：

• translate(x,y)=matrix(1,0,0,1,x,y)
• rotate(θ)=matrix(cosθ,sinθ,-sinθ,cosθ,0,0 )
• scale(x,y)=matrix(x,0,0,y,0,0)
• skew(θx,θy)=matrix(1,tan(θy),tan(θx),1,0,0)

2.过渡

元素从一个样式转变成另一个样式
2.1要素：动画效果的CSS，动画执行时间
2.2属性：transition设置四个过渡属性
transition-property名称
transition-duration时长
transition-timing-function时间曲线
transition-delay开始的时间

3.动画

需要遵循@keyframes规则
规定动画时长，动画名称

自定义动画效果：
示例：

.div8{
width: 100px;
height: 100px;
background: coral;
position: relative;
-webkit-animation: anim 5s infinite;
        animation: anim 5s infinite;
}
@keyframes anim {   /*走正方形*/
0%{background: coral;left: 0;top: 0}
25%{background: cadetblue;left: 200px;top: 0}
50%{background: cornflowerblue;left: 200px;top: 200px}
75%{background: cornsilk;left: 0; top: 200px}
100%{background: coral;left: 0;top: 0}
}
@-webkit-keyframes anim {
0%{background: coral;left: 0;top: 0}
25%{background: cadetblue;left: 200px;top: 0}
50%{background: cornflowerblue;left: 200px;top: 200px}
75%{background: cornsilk;left: 0; top: 200px}
100%{background: coral;left: 0;top: 0}
}