toc

Intro

css动画中主要包括变形、转换和动画，有2D和3D两部分，首先是2D的动画部分。

一、css变形Transformation

W3C中有2D变形和3D变形的的草案中定义了变形属性值有none和transform-function，transform-function包括：

• matrix()：定义了矩阵变换，即基于X和Y坐标重新定位元素的位置（较为复杂，其使用在次暂不探讨，可点此查看详情）。
• translate()：移动元素，基于X和Y坐标重新定位元素，值应该为两个，第一个表示水平方向，为正数时基于右边框向右移动，第二个值表示垂直方向，当为正数时基于上边框向下移动。若只有一个值的情况下表示水平移动。
• scale()：缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数和负数（首先反转元素在缩放元素），以及小数（使用小于1的小数来缩小元素），值应该为两个，第一个代表宽，第二个代表高，若只有一个值则表示两者相等。
• rote()：旋转元素对象，取值为一个度数值，随着值的增大元素顺时针旋转。
• skew()：倾斜元素对象，取值为度数值。值有两个，第一个表示下对于X轴进行倾斜，第二个表示相对于Y轴倾斜，当值为一个的时候表示基于X轴倾斜。

二、css3变形原点transform-origin

css中默认的变形原点为元素的中心，transform-origin接受两个值，可以为百分值、em、px等，也可以left、center、right和top、middle、bottom的关键字。

三、css3过度——transition

css变形定义动画的结果，而transition则定义了动画过程过渡的效果，transition和background一样属于混合属性，而且也一般混合使用，其子属性有：

• transition-property：定义需要过渡的css属性，值有： - none：表示不使用过渡属性。
• all：针对所有元素。
• IDENT：指定css属性列表
• transition-duration：定义动画过渡的时间，也就是动画持续的时间，单位为s活着ms（毫秒），默认为0秒，即无需过渡。
• transition-delay：定义动画的延迟时间，可以为正整数、负整数、零。为负时，过渡的动画在此开始显示，之前的动作被截断。默认为零。
• transition-timing-function：定义过渡动画的效果 - ease：默认值，较为平滑缓动的效果等同于cubic-bezier(0.25,0.1,0.25,1.0)。
• linear：线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)。
• ease-in：先快后慢，等同于cubic-bezier(0.42,0.0,1.0,1.0)。
• ease-out：先慢后快，等同于cubic-bezier(0.0,0.0,0.58,1)。
• ease-in-out：动画过程中快慢切换的过程，等同于cubic-bezier(0.42,0.1,0.48,1)。
• 最后就是直接定义贝塞尔曲线，贝塞尔曲线有点类似于ps、ai中的钢笔工具中曲线变换的的形式，具体到css中动画过渡效果，腾讯alloyteam有很好的展示，可以学习也可更方便的使用。

四、css动画——animation属性

css3规范的css动画模块，定义了css动画的基本实现方式，通过animation属性可以创造出很炫的动画效果，Animate.css上展示了一些很有用的效果，可以学习查看。

animation是个混合属性，包含有：

• animation-name：定义动画的名称。
• animation-duration：定义动画持续时间。
• animation-timing-function：定义动画的展示方式，值和transition-timing-function一样。
• animation-delay：定义动画延迟时间。
• animation-iteration-count：定义动画的播放次数，支持数字（非整数，导致动画结束在一个周期的某个部分，若为负值动画反向播放）和关键词infinite（无限次）
• animation-direction：定义动画的播放方向，默认为normal，另一个值为alternate，表示偶数次向前播放，奇数次向后播放。

刚才alloyteam中有个心跳灯的动画，自己很是喜欢，可以点此查看，自己也留了个备份（在此可以直接查看css动画代码）的。
—————每篇一图—————-