CSS-HTML：动画延迟问题

wztqucjr 于 2023-08-09 发布在其他

关注(0)|答案(1)|浏览(86)

动画延迟不起作用。使用了-webkit，但仍然无法工作。一切似乎都是正确的。我试着应用负值，但仍然不起作用。我正在尝试创建谷歌加载动画。为什么不管用？HTML似乎是正确的。延迟应该会给予蛇效应。

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh
}

.dots-container{
  display: flex;
  justify-content: space-evenly;
  /*align-items: center;*/
  width: 700px;
  height: 100px
}

.dots-container .d{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-block;
  animation: bouncyDots 1s ease-in-out infinite alternate;
}

.dot1{
  background-color: yellow;
animation-delay: 0.3s;
}
.dot2{
  background-color: purple;
  animation-delay: 0.6s;
}
.dot3{
  background-color: green;
  animation-delay: 0.7s
}
.dot4{
  background-color: red;
  animation-delay: 0.8s
}
.dot5{
  background-color: black;
  animation-delay: 1s
}

@keyframes bouncyDots{

  to{
    transform: translateY(3rem);
  }

}

个字符

css

来源：https://stackoverflow.com/questions/76830822/css-html-animation-delay-issue

1条答案

按热度按时间

vcudknz31#

如果我正确理解了你的问题，这个问题似乎与你如何将动画附加到元素有关。在您当前的设置中，动画同时应用于class .d的所有元素，从而使所有点的动画同步开始。
为了实现让每个点在不同的时间开始动画循环的预期效果，我建议为每个点单独调用动画。这样，您可以更好地控制每个动画周期的开始时间。下面是一个修改后的示例，说明如何设置此设置：

.dots-container .d {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-block;
  /* animation: bouncyDots 1s ease-in-out infinite alternate; */
}

.dot1 {
  background-color: yellow;
  animation: bouncyDots 3s infinite ease-in-out;
}
.dot2 {
  background-color: purple;
  animation: bouncyDots 3s infinite ease-in-out;
  animation-delay: 0.5s;
}
.dot3 {
  background-color: green;
  animation: bouncyDots 3s infinite ease-in-out;
  animation-delay: 1s;
}
.dot4 {
  background-color: red;
  animation: bouncyDots 3s infinite ease-in-out;
  animation-delay: 1.5s;
}
.dot5 {
  background-color: black;
  animation: bouncyDots 3s infinite ease-in-out;
  animation-delay: 1.8s;
}

@keyframes bouncyDots {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3rem);
  }
  100% {
    transform: translateY(0);
  }
}

字符串

赞(0）回复(0）举报 2023-08-09

我来回答

CSS-HTML：动画延迟问题

1条答案

相关问题

热门标签

最新问答