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

【问题标题】：keyframe animation using pseudo selectors使用伪选择器的关键帧动画
【发布时间】：2015-08-22 19:40:03
【问题描述】：

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

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

我为这个问题附上了小提琴和编码。

.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

【问题讨论】：

标签： css animation css-animations keyframe

【解决方案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>

【讨论】：

当然就是这么简单！！谢谢你为我解决这个问题：D
非常欢迎您 :) 如果这解决了您的问题，您可以激活答案旁边的绿色勾号。祝你有美好的一天。