CSS3中的变形/动画 _概念整理

CSS中的变形

transform

transform属性是静态属性，不是动画，写到style里，立马显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形；

• translate3d(x,y,z): 是用来控制元素的位置在页面上的三轴的位置的,沿着某一个轴进行位移
• rotate(deg):是用来控制元素旋转角度的；
• skew[x,y](deg) 这个属性是用来制作倾斜度的；
• scale([ratio]): 用来放大缩小效果，属性是比值；
  例：transform:scale(1.2)在原有的基础上放大1.2倍
• matrix3d，css矩阵。通过这个矩阵属性，涵盖了上面所有的属性值，可读性极差（全都是数字和单位，背起来有点模糊，数学功底强的人可以研究），目前没有理由推荐使用。

在不考虑兼容的情况下，建议尽量使用transform来实现一个元素的变形和位移（尤其是移动端开发的），因为它在浏览器解析的过程中，开启了设备的硬件加速，性能和体验都是强于传统的CSS样式改变的；
transform不兼容IE低版本浏览器（IE9及以下）；

CSS3中的动画

transition【过渡动画】

transition:我们设置一个过渡的规则和效果，当元素的样式发生改变的时候，就会按照这个规则来运动
-webkit-transition: [property] [duration] [time-function] [delay]
[property]:设置元素的哪些样式在改变后执行这个过渡的规则，默认是all，所有的样式改变都会执行这个规则，如果写的是width，代表只有元素的宽度改变才会执行这个规则
[duration]：设置动画运动的总时间，默认0；
[time-function]：设置动画运动的方式，默认是linear，除此之外还有ease、ease-in、ease-out、ease-in-out...
[delay]：设置延迟时间，默认是0s，如果设置是1s，当需要运动的时候会等待1s后在执行

[animation] 帧动画

-webkit-animation：
[name]：动画名称,运动轨迹(帧)的名字
[duration]：运动时间
[timing-function]：运动的方式
[delay]：延迟时间
[iteration-count]：运动次数 infinite无限次运动
[fill-mode]：此属性下有三个值：

• forwards：当元素按照轨迹运动完成后停留在最后一帧的位置,不设置默认动画完成后,元素立马回到第一帧的位置
• backwards：如果本次动画有延迟，那么在延迟等到的时间，元素始终处于第一帧的位置，不设置的话是处于当前位置
• both：同时具备以上两个特点（一般用这个）

设置运动的轨迹(帧)
@-webkit-keyframes [name] {
from{ => 0% 开始帧位置
top:10px;
}
25%{
top:-30px;
}
50%{
top:50px;
}
...
to{ => 100% 结束帧位置
top:100px;
}}

=>真实项目中我们自己一般不写多少帧轨迹，而是使用强大的 Animate.css 轨迹库来实现我们的需求https://daneden.github.io/animate.css/

简单对比两个动画运用场景：
transition:

• 目标位置和具体的运动轨迹可以不固定，我们可以在js中动态的设置运动的目标位置，只要把元素的样式发生改变，都会执行对应的过渡效果
• 只是一个简单的从A到B的一个过程，不能设置复杂的运动轨迹

animation:

• 可以设置复杂的运动轨迹，但是需要提前指定好轨迹公式，不能再JS中动态的修改；
• 我们可以依托强大的开源的Animate.css中提供的轨迹，完成我们的业务需求

以上，如果不妥之处请指正！