多步动画和过渡

Posted 2020-07-06

转载自http://www.w3cplus.com/css3/using-multi-step-animations-transitions.html

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。