Question

我有一个div和这个div的前面和::之后的伪元素。我想用不同的延迟（0,0.5和1.0）为它们中的每一个设置动画。

我已经尝试了很多方法，直到我意识到我可以用我想要的延迟移动伪元素，而不是 div 本身或者我只能移动 div 和伪元素会在同一时间内移动。

在第二种情况下，如果我尝试分别为伪元素设置动画，则会执行两次动画。

第一个例子：

.wave {
  background-color: blue;
  border-radius: 50%;
  height: 26px;
  margin: auto;
  position: relative;
  width: 26px;
}

.wave:before, .wave:after {
  animation: bounce 1s linear infinite alternate;
  border-radius: inherit;
  content: ' ';
  height: inherit;
  margin: inherit;
  position: absolute;
  width: inherit;
}

.wave:before {
  background-color: red;
  right: 30px;
}

.wave:after {
  background-color: green;
  animation-delay: 1s;
  left: 30px;
}

Seconde示例：

.wave {
  animation: bounce 1s linear infinite alternate;
  background-color: blue;
  border-radius: 50%;
  height: 26px;
  margin: auto;
  position: relative;
  width: 26px;
}

.wave:before, .wave:after {
  border-radius: inherit;
  content: ' ';
  height: inherit;
  margin: inherit;
  position: absolute;
  width: inherit;
}

.wave:before {
  background-color: red;
 right: 30px;
}

.wave:after {
  background-color: green;
  animation-delay: 1.2s;
  left: 30px;
}

话虽如此，我只想知道：

是否可以仅使用一个div，以不同的时间移动所有这些？怎么样？

编辑1

这是一个codepen，突出显示了这种情况： https://codepen.io/haaswill/pen/vyroJG

Answer 1

您应该能够将动画属性放在：before和：after

之后

我摆弄了这个嘿 - 我能够让这3个部分自己制作动画。看看这里： https://jsfiddle.net/karolbrennan/706gkbna/2/

@keyframes bounce {
    0%   {left: 0px; }
    25%  {left: 25px; }
    50%  {left: 50px; }
    75%  {left: 25px; }
    100% {left: 0px; }
}

.wave {
  animation: bounce 3.5s linear infinite alternate;
  background-color: blue;
  border-radius: 50%;
  height: 26px;
  margin: 100px auto;
  position: relative;
  width: 26px;
}

.wave:before, .wave:after {
  background-color: inherit;
  border-radius: inherit;
  content: ' ';
  height: inherit;
  width: inherit;
  position: absolute;
}

.wave:before {
  animation: bounce 1.5s linear infinite alternate;
  animation-delay: 0.25s;
  right: 30px;
}

.wave:after {
  animation: bounce 2s linear infinite alternate;
  animation-delay: 0.5s;
  left: 30px;
}

这里有一篇关于此的文章：https://cssanimation.rocks/pseudo-elements/

没有动画伪元素的Animate元素

1 个答案: