使用伪选择器的关键帧动画

Question

我如何正确地使用伪选择器为 div 设置动画，而不让动画跳回到 div 的主动画，然后播放分配给伪选择器的动画。

有问题的元素是红色圆圈，它只需要向上移动 (X) 量，而不是向后移动然后向上移动。

我附上了这个问题的 fiddle 和编码。

.blobs {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  width: 900px;
  height: 200px;
  margin: auto;
}
.blob {
  background: grey;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border-radius: 100%;
  text-align: center;
  line-height: 70px;
}
@keyframes blob-anim-red {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(100px);
    animation: forwards;
  }
}
@keyframes blob-anim-blue {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(200px);
  }
}
@keyframes blob-anim-green {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(300px);
  }
}
.blob:nth-child(2) {
  animation: blob-anim-red cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate;
  background: rgba(255, 0, 0, .3);
}
@keyframes move-up {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-10px);
  }
}
.blob:nth-child(2):hover {
  /*transform:translateY:(20px);*/
  animation: move-up cubic-bezier(1, .01, 0, 1) 0.5s alternate;
  transition: transform 0.3s, color 0.3s, background 0.3s;
  color: #fff;
  background: rgba(255, 0, 0, 0.8);
}
.blob:nth-child(3) {
  animation: blob-anim-blue cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate;
  background: rgba(0, 255, 0, .3);
}
.blob:nth-child(4) {
  animation: blob-anim-green cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate;
  background: rgba(0, 0, 255, .3);
}
.blob:first-child {
  background: #ccc;
}

<body>
  <div class="help"></div>
  <div class="blobs">
    <div class="blob">
      <p>1st Child</p>
    </div>
    <!-- 1st child-->
    <div class="blob">
      <p>2nd Child</p>
    </div>
    <!-- 2nd child-->
    <div class="blob">
      <p>3rd Child</p>
    </div>
    <!-- 3rd child-->
    <div class="blob">
      <p>4th Child</p>
    </div>
    <!-- 4th child-->
  </div>
</body>

JsFiddle

Answer 1

您在 :hover 上触发的动画覆盖了红色圆圈的 transform 属性，因此看起来整个动画都被重置了。克服这个问题的一个想法是使用 margin 而不是 transform: translate 或者只是第二次复制最终转换属性。

这是一种方法，使用 margin 属性作为在 :hover 上触发的动画。此解决方案使用简单的 transitions 而不是动画。

.blobs {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  width: 900px;
  height: 200px;
  margin: auto;
}
.blob {
  background: grey;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border-radius: 100%;
  text-align: center;
  line-height: 70px;
}
@keyframes blob-anim-red {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(100px);
    animation: forwards;
  }
}
@keyframes blob-anim-blue {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(200px);
  }
}
@keyframes blob-anim-green {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(300px);
  }
}
.blob:nth-child(2) {
  animation: blob-anim-red cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate;
  background: rgba(255, 0, 0, .3);
  /*relevant change 1*/
  transition-property: margin, color;
  transition-duration: 0.3s;
}

.blob:nth-child(2):hover {
  /*relevant change 2*/
  margin-top: -90px;
  color: #fff;
  background: rgba(255, 0, 0, 0.8);
}
.blob:nth-child(3) {
  animation: blob-anim-blue cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate;
  background: rgba(0, 255, 0, .3);
}
.blob:nth-child(4) {
  animation: blob-anim-green cubic-bezier(1, .01, 0, 1) 0.5s forwards alternate;
  background: rgba(0, 0, 255, .3);
}
.blob:first-child {
  background: #ccc;
}

<body>
  <div class="help"></div>
  <div class="blobs">
    <div class="blob">
      <p>1st Child</p>
    </div>
    <!-- 1st child-->
    <div class="blob">
      <p>2nd Child</p>
    </div>
    <!-- 2nd child-->
    <div class="blob">
      <p>3rd Child</p>
    </div>
    <!-- 3rd child-->
    <div class="blob">
      <p>4th Child</p>
    </div>
    <!-- 4th child-->
  </div>
</body>

使用伪选择器的关键帧动画

keyframe animation using pseudo selectors

css

animation

keyframe

css-animations