How to apply a hover effect on an element which has already been handled by an forward animation?

Question

I have a text and block in an animation of an SVG element. Here in my example i simplified everything.

I want to have one initial animation and afterwards a hover animation on the block element. The initial animation is fine as it is. (use chrome to have equals measurements). But after the initial animation the user should be able to hover the block and the block itself should resize (which is also working already) and the text should get an opacity of 1. But this won't work since the opacity is already set by the keyframe animation.

Any suggestions on how to work around on this one? I don't mind if i use JS or CSS or any frameworks. I don't rely on CSS animations. Just used them because i thought i'd be cleaner.

Important Edit: I forgot a simple but very important thing. Before the animation there are some other animations on different elements. So i have a delay of let's say 2 seconds. Before the animation starts, the opacity should be 0 so the text is not visible until the animation starts. Sorry, forgot about that!

.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 link (same code as above): https://codepen.io/jdickel/pen/xJbQrY

Answer 1

Instead of a forwards animation, you can simply set the initial opacity to 0.3.

EDIT: I'm fairly confident that forwards animation styles can't be easily overridden (though I'm unable to find it in documentation for some reason), so you could do similarly to what was originally suggested and just extend the time of the animation like so:

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

Answer 2

First, you need to remove forwards from the .text animation. You can use Javascript's mouseenter and mouseleave events to set the text's opacity when .block is hovered over.

.text{
  font-weight: bold;
  opacity: 0;
  transition: all .8s;
  animation: showText 3s ease-in-out;
  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' id="text" onmouseenter="function1()" onmouseleave="function2()">
  Foo Bar!
</div>
<div class='block' onmouseenter="function1()" onmouseleave="function2()">
</div>
<script>
setTimeout(function(){
document.getElementById("text").style.opacity = "0.3";
}, 3000)
function function1(){
 document.getElementById("text").style.opacity = "1";
}
function function2(){
document.getElementById("text").style.opacity = "0.3";
}
</script>