gpt4 book ai didi

CSS 关键帧动画在中间暂停然后再次恢复?

转载 作者:行者123 更新时间:2023-11-28 00:15:54 25 4
gpt4 key购买 nike

这可能是个愚蠢的问题(有一段时间没有做过 JS/HTML)。我希望这个动画一直很流畅,但由于某种原因,它会在中间停止一小段时间然后恢复。添加更多步骤来尝试平滑过渡似乎只会暂停更长时间。有解决办法吗?

#under {
color: black;
font-size: 28px;
animation-duration: 4s;
animation-name: example;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;

}

@keyframes example {
0% {
transform: translateX(-330px);
}

50% {
transform: scaleX(3);
}

100% {
transform: translateX(330px);
}
}
<body>
<div id="under">
<p> - </p>
</div>
</body>

最佳答案

为了保持平稳移动,您需要将 scaleX 值定义为 0%100%。此外,我将您的计时功能从 ease-in-out 更改为 linear。在 50% 处,translateX 已经处于 0,因为您定义了起始值和结束值。为了保持一致性,我在 50% 处添加了 0 值。

#under {
background-color: #000;
color: white;
animation-duration: 4s;
animation-name: example;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
width: 100px;
height: 50px;
}

@keyframes example {
0% {
transform: scaleX(1) translateX(-330px);
}
50% {
transform: scaleX(3) translateX(0);
}
100% {
transform: scaleX(1) translateX(330px);
}
}
<div id="under"></div>

关于CSS 关键帧动画在中间暂停然后再次恢复?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55114335/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com