多步动画和过渡

发布于 南北

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。它支持负值时间,可以让动画同时动起来:

过渡

transitionanimation 的用法一样简单,简写形式如下:

.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;
}

现在过渡效果还是同时发生的,距离多步过渡还有一点距离。

多步过渡

要想模仿多步动画,我们可以通过逗号分隔为过渡属性设置多个值,其中的关键是使用 durationdelay 属性:

.box {
    transition: 
        /* step 1 */
        width      1s,
        /* step 2 */
        background 0.5s 1s;
}

在此基础上,我们还可以进一步拓展出更精致的过渡效果:

  • 鼠标悬停时,在 1s 内将 width150px 拉伸到 300px
  • 鼠标悬停时,在 1s 内将 background-color 从红色变为橘色
  • 鼠标悬停时,在 1s 内改变 box-shadow 的方向
  • 添加一行文本,当 widthheight 改变时从左侧执行退出动画
  • 添加另一行文本,当前一行消失时从右侧移入

/* 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/

南北

在校学生,本科计算机专业。狂热地想当一名作家,为色彩和图形营造的视觉张力折服,喜欢调教各类JS库,钟爱CSS,希望未来加入一个社交性质的公司,内心极度肯定“情感”在社交中的决定性地位,立志于此改变社交关系的快速迭代。个人博客

如需转载,烦请注明出处:https://www.fedev.cn/css3/using-multi-step-animations-transitions.htmlAir Jordan I High