Właściwość CSS Animation pozostaje po animacji

Próbuję, aby właściwość animacji CSS pozostała po zakończeniu, czy to możliwe?

To właśnie próbuję osiągnąć ...

Element powinien być ukryty, gdy użytkownik wyląduje na stronie, po 3 sekundach (lub czymkolwiek) powinien zniknąć, a po zakończeniu animacji powinien tam pozostać.

Oto próba gry na skrzypcach ... http://jsfiddle.net/GZx6F/

Oto kod do konserwacji ...

<h2>Test</h2>

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

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

Wiem, jak to zrobić z jQuery… to byłoby tak…

<h2>test</h2>

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

Myślę, że szukasz animation-fill-modewłaściwości CSS3

https://developer.mozilla.org/en/CSS/animation-fill-mode

Właściwość CSS Animation-fill-mode określa, w jaki sposób animacja CSS powinna stosować style do swojego celu przed i po wykonaniu.

dla swojego celu po prostu spróbuj ustawić

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

Ustawienie wartości do przodu «cel zachowa obliczone wartości ustawione przez ostatnią klatkę kluczową napotkaną podczas wykonywania»

W uzupełnieniu do odpowiedzi z @Fabrizio Calderan , to musi być powiedziane, że można nawet zastosować animation-fill-modewłaściwość forwardsbezpośrednio animation. Więc poniższe również powinny działać:

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

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

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>

Jak animować element i sprawić, by pozostał po zakończeniu animacji:

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

Przydarzyło mi się coś podobnego. Dodałem pozycję: względem animowanego elementu i to naprawiło to za mnie.