多步动画和过渡
CSS animations 用法简洁功能强大，一个完整的动画只需命名、@keyframes 关键帧定义以及绑定到元素三个步骤。虽然 CSS animations 的概念和用法比较简单，但却可以创造复杂精致的动画，比如多步过渡动画，这也是本文关注所要向您介绍的重点。
keyframe
如果我们为一个元素设置了背景色的关键帧，比如将背景从橘色变为黑色，那么橘色就会随着时间的推移渐变为黑色，可以说 CSS animations 自带了过渡效果。
body {
background: black;
animation: color-me-in 5s; /* other keywords like "infinite alternate" can be useful here */
}
@keyframes color-me-in {
/* You could think of as "step 1" */
0% {
background: orange;
}
/* You could think of as "step 2" */
100% {
background: black;
}
}
接下来我们还可以添加更多的过渡色：
@keyframes color-me-in {
0% {
background: orange;
}
/* Adding a step in the middle */
50% {
background: blue;
}
100% {
background: black;
}
}
简而言之：从动画开始到结束，一直都有过渡效果在发生。
去除补间动画
从上面的示例可以看到，颜色变化之间有明显的过渡效果，这种默认行为在一般情况下都是不错的。通常来说，由于 animation-timing-function 的默认值是 ease，所以动画想过往往比 linear 线性渐变效果更流畅和生动。
如果使用 step() 函数来强制关键帧在特定的时间点执行，而不再是以过渡的效果实现：
多步动画
Apple Music 的声音均衡器就是多部动画的经典示例：多个垂直的指示条随着音乐的节奏或上升或下降。下面是一个没有动画的效果：
接下来创建一个拥有 25 帧的动画，并命名为 equalize，每一帧占动画 4% 的时间，然后将该动画绑定到 .bar 元素上：
虽然效果动起来了，但是与我们预期的还是有些差异：每个垂直条应该是独立变化的。接下来，我们为每个 .bar 添加不同的 animation-duration 动画属性，从而设定不同的动画时间：
大功告成！节奏响起之时，这个动画就会随之起舞。此外还有一个可选属性：animation-delay。它支持负值时间，可以让动画同时动起来：
过渡
transition 和 animation 的用法一样简单，简写形式如下：
.move-me {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}
下面我们给一个元素设置背景的过渡效果，当鼠标悬停在该元素上面时，改变该元素的背景色和宽度：
.box {
width: 150px;
height: 150px;
background-color: red;
transition: 1s;
}
.box:hover {
width: 300px;
background-color: orange;
}
现在过渡效果还是同时发生的，距离多步过渡还有一点距离。
多步过渡
要想模仿多步动画，我们可以通过逗号分隔为过渡属性设置多个值，其中的关键是使用 duration 和 delay 属性：
.box {
transition:
/* step 1 */
width 1s,
/* step 2 */
background 0.5s 1s;
}
在此基础上，我们还可以进一步拓展出更精致的过渡效果：
- 鼠标悬停时，在
1s内将width从150px拉伸到300px - 鼠标悬停时，在
1s内将background-color从红色变为橘色 - 鼠标悬停时，在
1s内改变box-shadow的方向 - 添加一行文本，当
width和height改变时从左侧执行退出动画 - 添加另一行文本，当前一行消失时从右侧移入
/* Our box element */
.box {
width: 150px;
height: 150px;
background-color: red;
box-shadow: 5px 5px 25px #000;
transition: all 1s;
}
/* On hover... */
.box:hover {
/* Increase width */
width: 300px;
/* Change color */
background-color: orange;
/* Move the shadow */
box-shadow: -5px 5px 25px #000;
}
/* The first line of text */
.box__blurb {
/* Start with full opacity and centered */
opacity: 1;
transform: translateX(45px);
/* Then transition these chained properties */
transition:
opacity 0.5s 2s,
transform 0.5s 0.5s;
}
/* On .box hover... */
.box:hover .box__blurb {
/* Fade out */
opacity: 0;
/* Move over to the right */
transform: translateX(-500px);
}
/* The second line of text */
.rect__blurb {
/* Start with no opacity and pushed off the element */
opacity: 0;
transform: translateX(500px);
/* Then transition these chained properties */
transition:
opacity 0.5s 1s,
transform 0.5s 1s;
}
/* On .box hover... */
.box:hover .rect__blurb {
/* Face in */
opacity: 1;
/* While entering from the right */
transform: translateX(-100px);
}
下面是另一个多步过渡的示例，当鼠标悬停在按钮上时，执行多步过渡：
总结
多步动画和过渡是非常有富有表现力的 CSS 效果。上面的音乐均衡器是一个很实用的示例，如果你对此很感兴趣，还可以看看 Ana Tudor 的这篇文章《How I Live-Coded My Most-Hearted Pen》以及 Rémi Lacorn 的这个示例：http://codepen.io/rlacorne/pen/eKfkh。
本文根据@GEOFF GRAHAM的《Using Multi-Step Animations and Transitions》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：https://css-tricks.com/using-multi-step-animations-transitions/。
如需转载，烦请注明出处：https://www.fedev.cn/css3/using-multi-step-animations-transitions.htmlAir Jordan I High