CSS ：怎样从动画的某一阶段开始播放

背着书包上学校
1,006 阅读2分钟

这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战

背景

学习前端三个月了，准备刷刷面试题，总结总结，一天几道面试题，向大厂进军。

问题

如何设置动画即时播放，播放开始的位置为动画中间的某一个阶段？

解析

我们用一个动画，来解释下我们该怎样去让一个动画即时播放。

95LvfPXej9.gif

我们看了看这个动画，感觉是不是自己也可以实现，没有什么技术难度。 来看看我们大部分人的实现

<!DOCTYPE html>
<html lang="en">

<head>
    
    <style>
        .loading {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 200px auto;
        }

        .loading i {
            display: inline-block;
            border-left: 8px solid red;
            height: 20px;
            animation: scaleUp 4s linear infinite alternate;
        }
        //第二个节点延迟播放1s
        .loading i:nth-child(2) {
            animation-delay: 1s;
        }
         //第三个节点延迟播放2s
        .loading i:nth-child(3) {
            animation-delay: 2s;
        }
        //第四个节点延迟播放3s
        .loading i:nth-child(4) {
            animation-delay: 3s;
        }

        @keyframes scaleUp {
            to {
                transform: scaleY(5);
            }
        }
    </style>
</head>
<body>
    <div class="loading">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
</body>
</html>

大部人的实现思路是不是都是上面这样： 音频波形由一个一个的矩形组成，每一个小矩形都会有垂直缩放的动画效果。想要形成此起彼伏的动画效果，是不是大家给每一个矩形设置一个延时，就可以实现了。

我们来看看这样实现的效果动画：

UcXxnOz6DH.gif

是不是大家应该发现问题了，由于设置了动画延时，后面的矩形都是默认高度，没有参差的效果！

image.png

解决这个问题的重点是：把延时的实践全部换成负数即可

      .loading i:nth-child(2) {
            animation-delay: -1s;
        }

        .loading i:nth-child(3) {
            animation-delay: -2s;
        }

        .loading i:nth-child(4) {
            animation-delay: -3s;
        }

这样就既保留了延迟时间差，又实现了动画立即播放，且矩形的高度都不相同。

深入理解动画负值

你或许以为你理解了动画负值，那接下来看这个问题？

<head>
    
    <style>
        .ele {
            //这里是负值-0.25s
            animation: fadeIn 1s linear -0.25s;
        }
        @keyframes fadeIn {
            0% {
                option: 0  //透明度从0开始
            }
            100% {
                option: 1
            }
        }
    </style>
</head>
<body>
    <div class="ele">
    </div>
</body>

我们看上面代码，让我们猜猜动画初始位置，透明度是从多少开始？？

  1. 0.75
  2. 0.25

答案：0.25

是不是又很多人猜错了，认为应该是0.75。

这是因为很多语言中负值，都是时间线往前移，给人的感觉是从透明度1开始向前移动0.25s,结果是0.75!

这里很多人都会犯错，大家要记忆一下。

结语

一步一步慢慢来，踏踏实实把活干！

avatar
文章
阅读
粉丝