CSS 动画

[shuangmianxiaoQ]

transition 补间动画

/* property name | duration | timing function | delay */
transition: width 3s ease-in-out 1s;

trasnsition 支持的属性：Transition 所支持的css属性

生成transition-timing-function函数的工具：Ceaser - CSS Easing Animation Tool

keyframe 关键帧动画

• 相当于多个补间动画
• 与元素状态的变化无关
• 定义更加灵活

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

@keyframes slidein {
  from {
    transform: scaleX(0);
  }
  to  {
    transform: scaleX(1);
  }
}

其他属性（详情查看MDN：animation - CSS | MDN）：

• animation-iteration-count：动画在结束前运行的次数
• animation-direction：是否反向播放
• animation-fill-mode：在动画执行之前和之后如何给动画的目标应用样式
• animation-play-state：动画是否运行或者暂停

逐帧动画

• 适用于无法补间计算的动画
• 资源较大
• 使用steps(1)：将关键帧之间的补间去掉

面试真题

1. CSS动画的实现方式有几种

   • transition
   • keyframes(animation)

2. 过渡动画和关键帧动画的区别

   • 过渡动画需要有状态的变化，关键帧动画不需要状态的变化
   • 关键帧动画能控制的更精细

3. 如何实现逐帧动画

   • 使用关键帧动画
   • 去掉补间（steps）

4. CSS动画的性能

   • 性能不坏
   • 部分情况优于JS
   • JS可以做的更好
   • 部分高危属性，哪种方式都不好（box-shadow等）