CSS3变形与动画

CSS3的变形属性：transform，改变元素的样式

优势：开启了硬件加速，比传统的样式改变性能流畅一些

特点： 基于transform变形的元素，相当于脱离了文档流，对其余元素的位置不会产生影响

• scale(N) 缩放
• translate(X, Y) 位移
• rotate(Ndeg) 旋转N度
• skew(Ndeg) 倾斜N度
• matrix 矩阵变形

CSS3中的过渡动画：transition

给元素设置过渡效果，当元素的样式在某种情况下发生改变了，不是立即改变，而是按照指定的效果慢慢改变，从而实现动画效果

• transition-property：设置过渡的样式属性（哪些样式改变会执行过渡效果），默认是all，元素的所有样式改变都会执行过渡效果
• transition-druation：动画运行的时间 ms/s
• transition-timing-function: 运行的方式，linear默认值“匀速运动”、ease、ease-in、ease-out、ease-in-out、cubic-bezier
• transition-delay：设置延迟时间，默认值0s“立即执行”

CSS3的帧动画：animation

1. 制作运动的轨迹（每一帧元素的样式）@keyframes

   @keyframes 动画名{
       0%或者from{ 第一帧的样式 }
       ...
       50%{ 中间某帧的样式 }
       ...
       100%或者to{ 最后一帧的样式 }
   }
   

2. 播放动画（按照轨迹运动）

• animation-name：动画名
• animation-duration：播放的时间
• transition-timing-function: 运行的方式，linear默认值“匀速运动”、ease、ease-in、ease-out、ease-in-out、cubic-bezier
• transition-delay：设置延迟时间，默认值0s“立即执行”
• animation-iteration-count：播放次数，默认1次，infinity：无限次播放
• animation-fill-mode：控制运动状态
  • forwards：animation动画，元素运动完，默认会返回第一帧所在的位置，如果设置了这个属性，则运动完停留在最后一帧的位置
  • backwards：在动画设置延迟时间的情况下，让元素在第一帧的位置等待运行
  • both：同时具备以上两个特点

定时器动画

1. setTimeout / clearTimeout
2. setInterval / clearInterval

• 定时器的返回值是一个数字
• 把timer设置为null，可以检查定时器是否还存在