制作动画分两步：定义动画和应用动画。
1、keyframes 定义动画
/* widen 是动画名称，能够依据本人的须要命名 */ @keyframes widen { 0%{ width: 100px; } 100%{ width: 200px; } }0% 是动画的开始，100% 是动画的实现。这样的规定就是 动画序列。咱们能够用多个百分比来规定变动产生的工夫，比方 25%、50%等，或者用关键词 from 和 to，等同于 0% 和 100%。
在 @keyframes 中规定某项 CSS 款式，就能创立由以后款式逐步变为新款式的动画成果。
2、元素应用动画
div { width: 100px; height: 100px; /* 动画名称：widen（必写项） */ animation-name: widen; /* 实现一个周期动画须要破费的工夫（必写项） */ animation-duration: 5s; /* 动画的速度曲线，默认 ease */ animation-timing-function: ease; /* 动画何时开始，默认是 0 */ animation-delay: 2s; /* 动画播放的次数，默认是 1，infinite 是有限循环 */ animation-iteration-count: infinite; /* 动画是否在下一周期逆向播放，默认是 normal，alternate 是逆播放 */ animation-direction: alternate; /* 动画是否正在运行或暂停，默认是 running，pause 是暂停 */ animation-play-state: running; /* 动画完结后放弃以后状态（forwards）或者回到起始状态（backwards） */ animation-fill-mode: forwards; }以上的动画属性能够简写为：
animation: widen 5s ease 2s infinite alternate forwards;简写的属性外面不蕴含 animation-play-state，暂停动画通常和鼠标通过等事件配合应用。
3、动画曲线
动画曲线与 transition 中的静止曲线统一： linear（匀速）、ease（逐步慢下来）、ease-in（减速）、ease-out（加速）、ease-in-out（先减速后加速）。
除了这些，动画曲线中还有一种自定义的曲线 steps，指定了工夫函数中的距离数量（也就是分几步来实现动画）。
@keyframes move { 0%{ left: 0px; } 100%{ left: 200px; } } div { position: absolute; width: 100px; height: 100px; anmition: move 4s steps(5) forwards; }下面例子中， div 盒子用 4 秒的工夫从左向右挪动 200px，steps 为 5，那么每步的工夫是 4/5 = 0.8s，也就是每 0.8s 挪动 40px，5s 正好挪动 200px。
如果咱们要为元素增加多个动画，能够用 逗号 分隔。
animation: widen 5s ease alternate forwards, move 4s steps(5) forwards;