Question

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

有问题的元素是红色圆圈，只需向上移动（X）数量，而不是向后移动然后向上移动。

我附上了一个小提琴并编码了这个问题。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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>

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

1 个答案: