gpt4 book ai didi

CSS动画,如何减慢迭代速度?

转载 作者:太空宇宙 更新时间:2023-11-04 00:55:51 24 4
gpt4 key购买 nike

我有以下包含动画的类。我想做的是逐渐减慢每次迭代的持续时间。例如,第一次迭代应为 150 毫秒,下一次应为 200 毫秒,再下一次应为 250 毫秒,等等。我该如何实现?

.shoot-bullet {
animation: shoot-bullet;
animation-duration: 150ms;
animation-iteration-count: 8;
}

@keyframes shoot-bullet {
0% { transform: scale(1.8, 0.8) }
100% { transform: scale (1, 1) }
}

最佳答案

一个想法是简单地使用多个动画。当然,如果您想要 100 次以上的迭代,除非您考虑使用 SASS/LESS 来生成代码,否则它不是最佳解决方案。

这是一个例子。每一个的延迟应该是延迟 + 前一个的持续时间

.box {
width: 50px;
height: 50px;
margin:50px;
background: red;
animation:
shoot-bullet 100ms linear 0,
shoot-bullet 400ms linear 100ms reverse,
shoot-bullet 800ms linear 500ms,
shoot-bullet 1200ms linear 1300ms reverse,
shoot-bullet 1600ms linear 2500ms,
shoot-bullet 2000ms linear 4100ms reverse,
shoot-bullet 2400ms linear 6100ms;
}

@keyframes shoot-bullet {
0% {
transform: scale(1.8, 0.8)
}
100% {
transform: scale(1, 1)
}
}
<div class="box"></div>

为了避免使用 reverse 使动画的第一个和最后一个状态相同:

.box {
width: 50px;
height: 50px;
margin:50px;
background: red;
animation:
shoot-bullet 100ms linear 0,
shoot-bullet 400ms linear 100ms,
shoot-bullet 800ms linear 500ms,
shoot-bullet 1200ms linear 1300ms,
shoot-bullet 1600ms linear 2500ms,
shoot-bullet 2000ms linear 4100ms,
shoot-bullet 2400ms linear 6100ms;
}

@keyframes shoot-bullet {
0%,100% {
transform: scale(1, 1)
}
50% {
transform: scale(1.8, 0.8)
}
}
<div class="box"></div>

关于CSS动画,如何减慢迭代速度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54767817/

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