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

我在SVG元素的动画中有一个文本和块.在我的例子中,我简化了一切.

我想要一个初始动画,然后在块元素上有一个悬停动画.初始动画很好.(使用铬等于测量值).但是在初始动画之后,用户应该能够悬停块并且块本身应该调整大小(这也已经工作)并且文本应该得到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);
  }
}

  Foo Bar!