css3 动画(三)animation 简介

前言

上一篇中,总结了一下 transition 以及 cubic-bezier()。本篇中,将介绍 css3 动画中的更为灵活的动画属性:animation。

animation

css3 中的 animation 属性是一系列配置的简写形式,其子属性有:

animation-name

animation-name 表示的是关键帧的名称,那么如何定义关键帧呢?使用 @keyframes。

@keyframes

@keyframes 是定义 css3 animation 动画的关键所在。通过定义每一帧的样式状态,比 transition 能更好地控制中间过程。假如说 transition 只能定义 “两帧” 的状态,则 animation 可以定义 “n帧(n >= 2)” 的状态。

语法

“@keyframes + 名称 { // 关键帧样式... }”

@keyframes move {
  from { width: 100px; }
  to { width: 200px; }
}
/* 或 */
@keyframes move {
  0% { width: 100px; }
  100% { width: 200px; }
}

总结

其实 animation 也并不复杂,其有 8 个子属性。

下一篇:css3 动画(三)animation.css 源码解析(通过阅读 animation.css 动画库的源码,来提高对 css3 中 animation 属性的认识)

阅读 1.2k

推荐阅读
小前端
用户专栏

前端学习的记录

8 人关注
21 篇文章
专栏主页