如何制作不两端都卡死的CSS动画

如何解决如何制作不两端都卡死的CSS动画

我当前拥有的代码是：

.pulsing {
    -webkit-animation: color_change 1s infinite alternate;
    color: rgba(161,8,40,0.9);
}

@-webkit-keyframes color_change {
    0% { color: rgba(161,0.9); }
    100% { color: red; }

}

Demo here

问题是它达到100％并停留了2秒（大概）。我希望它达到100％，然后立即反转，或者也许在100％颜色下停留0.25秒左右，但是我不确定如何做到这一点。

解决方法

这似乎是一个奇怪的错误，我将进一步介绍您如何解决此问题。

我大多数时候都使用Chrome，但是在CSS方面，Firefox是无与伦比的。我选择了.pulsing元素并选择了“动画”选项卡。在这里，您可以清楚地看到发生了什么。

查看紫色字段。默认情况下，您具有缓入缓出过渡定时功能，并且由于交替使用，因此在缓入和缓出动画中都会短暂看到黄色。

只需在动画中添加linear，即可使紫色区域变直。如果要使其停留在黄色上更长（我在下面的示例中使用了该颜色），则需要创建一个自定义的贝塞尔曲线过渡计时功能。也许动画的橙色部分（参见图片）大约为50％。否则，它仍然看起来像是动画停在红色上。

.pulsing {
    -webkit-animation: color_change 1s infinite alternate linear;
    color: yellow;
}

@-webkit-keyframes color_change {
    0% { color: yellow; }
    100% { color: red; }

}

<div class="pulsing">
 TEXT
</div>

尝试一下：

.pulsing {
    -webkit-animation: 1s color_change infinite;
}

@-webkit-keyframes color_change {
    0% {
        color: rgba(161,8,40,0.9);
    }

    50% {
        color: red;
    }

    100% {
        color: rgba(161,0.9);
    }
}

问题是它并没有真正卡在那儿，只是达到了100％，然后他在剩下的时间里呆在那里。考虑一下您放1s，它在200毫秒内达到100％，因此它需要800毫秒来完成周期

.pulsing {
    -webkit-animation: color_change 3s infinite alternate;
    color: rgba(161,0.9);
}

@-webkit-keyframes color_change {
    0% { color: green; }
    100% { color: yellow; }
}

在此代码中，我使用绿色和黄色，当到达3s时，它会自动反转，然后快速变为黄色，因此它等待3s通过以开始反转。

更新我看到有2个选项：

使动画更短（但同时也使颜色过渡更快）。
像 @Maverick Fabroa 一样，将颜色设置为50％，而将100％设置为第一个颜色，如下所示：

@-webkit-keyframes color_change { 0％{颜色：绿色； } 50％{颜色：黄色； } 100％{颜色：绿色； } }