javascript - 如何对已经由前进动画处理的元素应用悬停效果？

Question

我在 SVG 元素的动画中有一个文本和 block 。在我的例子中，我简化了一切。

我想要一个初始动画，然后在 block 元素上有一个悬停动画。初始动画很好。 (使用 Chrome 具有相等的测量值)。但是在初始动画之后，用户应该能够将鼠标悬停在 block 上，并且 block 本身应该调整大小(这也已经可以工作了)并且文本的不透明度应该为 1。但这行不通因为关键帧动画已经设置了不透明度。

关于如何解决这个问题有什么建议吗？我不介意我使用 JS 或 CSS 或任何框架。我不依赖 CSS 动画。只是使用它们，因为我认为我会更干净。

重要编辑:我忘记了一件简单但非常重要的事情。在动画之前还有一些关于不同元素的其他动画。所以我有 2 秒的延迟。在动画开始之前，不透明度应为 0，以便在动画开始之前文本不可见。对不起，忘记了!

.text{
  font-weight: bold;
  opacity: 0;
  transition: all .8s;
  animation: showText 3s ease-in-out forwards;
  animation-delay: 2s;
}

.text:hover{
  opacity: 1;
  transition: all .8s;
}

.block{
  top: 50px;
  left: 50px;
  position: absolute;
  height: 20px;
  width: 20px;
  background-color: red;
  transition: all .8s;
  animation: popup 3s ease-in-out;
  animation-delay: 2s;
}

.block:hover{
  transform: scale(2);
  transition: all .8s;
}

@keyframes showText {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes popup {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

<div class='text'>
  Foo Bar!
</div>
<div class='block'>
</div>

codepen.io 链接(代码同上):https://codepen.io/jdickel/pen/xJbQrY

Answer 1

您可以简单地将初始不透明度设置为 0.3，而不是 forwards 动画。

编辑:我相当有信心不能轻易覆盖转发动画样式(尽管由于某种原因我无法在文档中找到它)，所以你可以像最初建议的那样做，只是延长动画的时间所以:

.text{
  font-weight: bold;
  /* Start out at 0.3 */
  opacity: 0.3;
  transition: all .8s;
  /* 2s + 3s = 5s */
  animation: showText 5s ease-in-out; /* no forwards */
}

.text:hover{
  opacity: 1;
  transition: all .8s;
}

.block{
  top: 50px;
  left: 50px;
  position: absolute;
  height: 20px;
  width: 20px;
  background-color: red;
  transition: all .8s;
  animation: popup 3s ease-in-out;
}

.block:hover{
  transform: scale(2);
  transition: all .8s;
}

@keyframes showText {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  /* Note the new animation keyframe locations */
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes popup {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

<div class='text'>
  Foo Bar!
</div>
<div class='block'>
</div>