Better

CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。

简介

CSS3动画的属性主要分为三类：transform、transition以及animation。

开启CSS硬件加速，CSS动画默认不会开启GPU加速，transform: translateZ(0);

transform变形属性

通过css3转换，向元素应用2d或3d转换，我们可以对元素进行移动，缩放，转动，拉长或者拉伸，转换是使元素改变形状，尺寸和位置的一种效果，通过transform引入动画。

rotate

设置元素顺时针旋转的角度，用法是：

• transform: rotate(x);
• 参数x必须是以deg结尾的角度数，可为负数表示反向。

scale

设置元素放大或缩小的倍数，用法包括：参数分别表示x,y方向上的倍数关系

• transform: scale(a);元素x和y方向均缩放a倍
• transform: scale(a, b);元素x方向缩放a倍，y方向缩放b倍
• transform: scaleX(a);元素x方向缩放a倍，y方向不变
• transform: scaleY(b);元素y方向缩放b倍，x方向不变

translate

设置元素的位移,可以是具体像素，也可以是百分比(相对自身)，

• transform: translate(a, b);元素x方向位移a，y方向位移b
• transform: translateX(a);元素x方向位移a，y方向不变
• transform: translateY(b);元素y方向位移b，x方向不变

skew

设置元素倾斜的角度，用法包括：

• transform: skew(a, b);元素x方向逆时针倾斜角度a，y方向顺时针倾斜角度b
• transform: skewX(a);元素x方向逆时针倾斜角度a，y方向不变
• transform: skewY(b);元素y方向顺时针倾斜角度b，x方向不变

以上的参数均必须是以deg结尾的角度数，可为负数表示反向。

matrix

设置元素的变形矩阵，因为矩阵变形过于复杂，暂略。

origin

设置元素的悬挂点，用法包括：比如设置旋转的中心点

• transform-origin: a b;元素的悬挂点为(a, b)
• 元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。默认是以元素的中心为基准点，改变基准点导致形状一样变，但是位置不同。
• 默认值：50% 50% 0

总结

对同一元素使用多种变形，只要使用空格隔开即可，运行过程按照写的先后顺序执行，不同顺序效果会不一样。

transition过渡属性

功能：使css属性值在一定的时间内平滑的过渡，这种效果可以在鼠标点击，划过，获得焦点或对元素任何改变中触发，并圆滑的以动画效果改变css的属性值，在伪列或普通选择器中都可以写此属性值。

transition-property

指定transition效果作用的CSS属性，其值是CSS属性名。表示是那些元素需要过渡，使用all表示所有属性

transition-duration

动画效果持续的时间，其值为以s结尾的秒数。

transition-timing-function

指定元素状态的变化速率函数，其取值基于贝赛尔曲线函数。

默认是ease（逐渐变慢）其他常用值有：ease-in加速，ease-out 减速，ease-in-out加速然后减速，linear 匀速

transition-delay

动画效果推迟开始执行的时间，其值为以s结尾的秒数。默认0.

animation动画属性

CSS3中真正的动画属性是animation，而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上，CSS3所支持的动画效果只是填充动画，也就是说先设定整个动画生命周期中的几个关键状态（key frame，关键帧），然后动画将自行计算并模拟关键帧之间的过渡。那么在设置animation的属性之前就必须先设定好关键帧了。

关键帧@keyframes的语法结构如下：

@keyframes  NAME(动画名称) {
     a% {
     /*CSS属性*/
     }
     b% {
      /*CSS属性*/
     }
     ...
}
@keyframes anim{
    0%{}
    25%{} //设置每个过程的变化
    50%{}
    75%{}
    100%{}
}

NAME表示动画的名字；a%、b%表示以百分号结尾的百分数，用于设定该关键帧在动画生命周期中的位置；百分数后面的{ } 中则需要写成该关键帧状态下CSS属性的值。另外，如果同一个百分数值在@keyframes中出现多次，那么后出现的将覆盖先出现的；并且关键帧在@keyframes中是无序的。

设置完关键帧后就可以继续设定animation了。

使用：规格动画时长和名称 animation :ainm 5s;

• animation-name：指定选用的动画的名字，即keyframes中的NAME。
• animation-duration：同transition-duration。
• animation-timing-function：同transition-timing-function。
• animation-delay：同transition-delay。
• animation-iteration-count：设定动画执行的次数，其值可以是数字也可以是infinite（循环执行）。
• animation-direction：设定动画执行的方向，其值可以是normal（正常顺序播放）或alternate（反向播放）。

perspective

perspective 中文意思：透视，视角。这个属性直接决定了你看到的2D还是3D。没有透视，不成3D。默认值：none。与 0 相同。不设置透视。

CSS3 3D transform的透视点是在浏览器的前方。

perspective属性有两种书写形式，一种用在舞台元素上（动画元素们的共同父辈元素）；第二种就是用在当前动画元素上，与transform的其他属性写在一起。

.stage {
    perspective: 600px;
}

#stage .box {
    transform: perspective(600px) rotateY(45deg);
}

使用下面这种写法，表示每个元素都有自己的视点。上面的写法表示舞台整个作为视点元素。

其他属性

• perspective-origin：头在平面上的位置。默认在元素中心。设置50% 50%也是中心。
• transform-style：preserve-3d 默认值 flat 在表示所有子元素在2d平面呈现。子元素使用transform才有效，这个设置表示3d空间呈现。同样不是元素本身。
• backface-visibility：在CSS3的3D世界中，默认情况下，我们是可以看到背后的元素，因此，为了切合实际，我们常常会这样设置，使后面元素不可见

参考

• 好吧，CSS3 3D transform变换，不过如此！