css3 动画的有关属性

transform

transform: none|transform-functions;

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

2D transform常用的transform-function的功能:

• translate()：用来移动元素，可以根据X轴和Ｙ轴坐标重新定位元素位置。在此基础上有两个扩展函数：
•                   translateX() 和 translateY()。
• scale()：用来缩小或放大元素，可以使用元素尺寸发生变化。在此基础上有两个扩展函数：
•             scaleX() 和 scaleY()。
• rotate()：用来旋转元素。
• skew()：用来让元素倾斜。在此基础上有两个扩展函数：skewX()和skewY()。
• matrix()：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。

3D transform常用的transform-function的功能:

• translate3d()：移元素元素，用来指定一个3D变形移动位移量
• translate()：指定3Ｄ位移在Ｚ轴的位移量。
• scale3d()：用来缩放一个元素。
• scaleZ():指定Z轴的缩放向量。
• rotate3d()：指定元素具有一个三维旋转的角度。
• rotateX()、rotateY()和rotateZ()：让元素具有一个旋转角度。
• perspective()：指定一个透视投影矩阵。
• matrix3d()：定义矩阵变形。
  

transition

transition: property duration timing-function delay;默认值（all 0 ease 0）

transition 属性是一个简写属性，用于设置四个过渡属性；

ease 可以用 cubic-bezier(1.0, 0.5, 0.8, 1.0) 替代；

具体见 http://cubic-bezier.com/#.17,.67,.83,.67

transition 属性是一个简写属性，用于设置四个过渡属性；

transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

 

 

 

 

 

 

 

animation

animation: name duration timing-function delay iteration-count direction;默认值（none 0 ease 0 1 normal）

animation 属性是一个简写属性，用于设置六个动画属性。

animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。