05.CSS3动画-页面特效

CSS3动画

1. transform2D、3D转换

通过css转换，我们能够对元素进行移动、缩放、转动、拉伸使元素改变形状、尺寸和位置的一种效果。

• 2D转换方法
  translate()：平移，参数x轴，y轴移动的距离

rotate()：旋转，参数旋转的角度

scale()：缩放，两个参数，第一个宽度，第二个高度，采取的是倍数的方式

skew()：倾斜，x轴倾斜度数，y轴倾斜度数

matrix()

• 3D转换方法
  rotateX()
  rotateY()

  
  
  

2. transition动画效果

• transition:proporty(属性) dration(时间) timing-function(哪种形式过度动画)

当鼠标移入时，改变颜色，动画执行时间为3s，线性渐变。

简写

• 多个动画效果，以，隔开

  
  
  

3.animation动画效果

animation可以实现较为复杂的动画效果，transition只能指定起点和终点的效果，而animation可以在过程中过度多个效果，实现帧的变化。

4.timing-function实现动画的方法

linear（从开始到结束以同样的速度改变），
ease-in(由慢到快)，
ease-out（由快到慢），
ease、ease-in-out（由慢到快再慢）