La propriété CSS Animation reste après l'animation

Question

J'essaie de faire en sorte qu'une propriété d'animation CSS reste en place après avoir été complétée, est-ce possible ?

Voici ce que j'essaie de faire...

L'élément doit être caché lorsque l'utilisateur arrive sur la page, après 3 secondes (ou autre), il doit apparaître en fondu et une fois l'animation terminée, il doit rester en place.

Voici une tentative de violon... http://jsfiddle.net/GZx6F/

Voici le code de préservation...

<h2>Test</h2>

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

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

Je sais comment faire cela avec jQuery... cela serait comme ceci...

<h2>test</h2>

<script>
  $(document).ready(function(){
    $('h2').hide().delay(3000).fadeIn(3000)
  });
</script>

Answer 1

// Beggin

#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);

  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}

<div id="box"></div>