css - 动画元素而不动画伪元素

Question

我有一个 div 和这个 div 的::before 和::after 伪元素。我想用不同的延迟(0、0.5s 和 1.0)为它们中的每一个制作动画。

我尝试了很多方法，直到我意识到我可以移动两个 pseudo-elements 我想要的延迟，但不是 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;
}

第二个例子:

.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

这是一个代码笔，突出显示了这种情况: 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/