CSS Animation: fade out and translate text and fade back in but with larger font size-CodePudding

Is it possible to create an animation with CSS so that a given element (in the example, an h2 tag) when hovered moves a bit and fades out, and come back a few moments later fading in with a larger font-size.

Ideally:

This would occur on hover and the inverse when no longer hovering.
Without specifying the initial font size (in the example 2rem).

I've been trying some solutions with animations but so far nothing close to what I'm looking for.

Thanks

:root {
  height: 100%;
  background-color: lightgrey;
  padding: 30px;
  text-align: center;
}

h2 {
  font-family: Arial;
  font-size: 2rem;
}

:root:hover h2 {
  font-size: 5rem;
  animation: text 1s forwards ease-out;
}

@keyframes text {
  0% {
    transform: translateY(-30px);
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
  }
}

  <h2>TEXT</<h2>

CodePudding user response：

Thank you for providing a snippet. Not sure this is what you opted for. I added a flex container to center the text, but this is optional.

:root {
  height: 100%;
  background-color: lightgrey;
  padding: 30px;
  text-align: center;
}

h2 {
  font-family: Arial;
}

:root:hover h2 {
  animation: text 1s forwards ease-out;
}

@keyframes text {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }
  25% {
    transform: translateY(-30px);
    opacity: 0;
    font-size: 1rem;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 0;
    transform: translateY(0px);
  }
  100% {
    font-size: 5rem;
    opacity: 1;
  }
}

<div style="height: 150px; display:flex; align-items: center; justify-content: center;">
<h2>TEXT</h2>
</div>

CodePudding user response：

The root element confuses me. Nevertheless, you can add a font-size and oppacity 0 at 50 percent. The element will return to the original place afterwards. The margin-top keeps the element with the bigger font size in place. Not sure if this is the ideal solution.

Maybe just personal preference. I have changed the animation to ease-in-out, see https://www.w3schools.com/css/css3_transitions.asp

:root {
  height: 100%;
  background-color: lightgrey;
  text-align: center;
}

h2 {
  font-family: Arial;
  padding: 0px;
}

:root:hover h2 {
  animation: text 3s forwards ease-in-out;
}

@keyframes text {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    font-size: 2rem;
  }
  100% {
    opacity: 1;
    margin-top: 1.5rem;
    font-size: 3.5rem;
  }
}

  <h2>TEXT</<h2>