【前端】-020-页面制作-CSS-动画

Animation

动态展现CSS样式的变化。

• 动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。
• 让浏览器控制动画序列，允许浏览器优化性能和效果
• 动画运行效果良好，甚至在低性能的系统上。
• 相对一transition，animation可在网页加载时自动执行，且可以实现多帧动画

常用属性

1. 配置动画时间、时长以及其他动画细节

• animation-name: keyframename | none;

  • keyframename规定需要绑定到选择器的 @keyframes 的名
  • none表示无动画效果

• animation-duration: <time>;

  • 规定完成过渡效果需要花费的时间

• animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n);

  • 规定动画的速度曲线，默认是ease

• animation-iteration-count: n|infinite;

  • 定义动画的播放次数。

• animation-direction: normal | alternate | reverse | alternate-reverse;

  • 规定动画是播放的方向，默认是normal

• animation-play-state: paused|running;

  • 规定动画状态，运行还是暂停。

• animation-delay: time;

  • 规定动画何时开始，默认是 0。

• animation-fill-mode : none | forwards | backwards | both;

  • 设置动画结束时的关键帧状态
  • animation-fill-mode

2. 关键帧的定义

• 每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
• 关键帧使用@keyframes来指定动画发生的时间点
• 0%表示动画的第一时刻，100%表示动画的最终时刻，可用别名：from和to
• 也可包含额外可选的关键帧，描述动画开始和结束之间的状态。

          from{opacity:1}
          to{opacity:0}
}```

```@keyframes framName{
          0%{opacity:1}
          100%{opacity:0}
}```

```@keyframes framName {
          0%,50%,100%{opacity:1}
          25%,75%{opacity:0}
}```

---
参考资料
1. http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
2. https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations