CSS3基础——变形与动画

Transform: none|transform-functions;

1. 旋转 rotate()：主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
   
   
2. 扭曲 skew(x，y)：将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜，会导致元素变形，例：正方形x轴倾斜变为平行四边形。
   
   
3. 缩放 scale(X,Y)：使元素水平方向和垂直方向同时缩放
   
   
4. translate(x,y)：水平方向和垂直方向同时移动，类似于position中的relative。
   
   
5. matrix()：可以用rotate()，scale(X,Y)替换。暂时没发现又强大之处。
   
   
6. transform-origin：改变元素原点（默认为x轴y轴交点）位置：
   
   
   
   

Transition: property duration timing-function delay;

1. 子属性
   transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
   图源：W3cschool
   
   transition: all .28s ease-in .1s;
   整个过渡0.1s后触发，并且整个过渡持续0.28s
   
   
   

Keyframes****关键词 “from” 和 “to”，等价于 0% 和 100%。

1. j兼容性问题：Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。
   
   
2. animation: name duration timing-function delay iteration-count direction;
   
   常用属性：name timing-function iteration-count
   
   animation-name：调用 @keyframes 定义好的动画（区分大小写）
   
   animation-duration，animation-timing-function，animation-delay的使用类似于transition
   
   animation-iteration-count属性主要用来定义动画的播放次数，默认值为1，infinite为无限循环。
   
   animation-direction属性主要用来设置动画播放方向：
   
   animation-direction:normal | alternate [, normal | alternate]*
   normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
   另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
   
   animation-play-state属性主要用来控制元素动画的播放状态:running和paused.