CSS Animation property stays after animating

Question

I\'m trying to get a CSS animation property to stay after completing, is this possible?

This is what I\'m trying to achieve...

The element should be hidden w

Answer 1

In addition to the answer of @Fabrizio Calderan, it has to be said that you can even apply the animation-fill-mode property forwards directly to animation. So the following should also work:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}

Test