Властивість CSS Animation залишається після анімації

Я намагаюся отримати властивість анімації CSS, щоб вона залишалася після завершення, чи можливо це?

Це те, чого я намагаюся досягти ...

Елемент повинен бути прихований, коли користувач потрапляє на сторінку, через 3 секунди (або що завгодно) він повинен зникати, а після завершення анімації він повинен залишатися там.

Ось спробу скрипки ... http://jsfiddle.net/GZx6F/

Ось код для збереження ...

<h2>Test</h2>

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

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

Я знаю, як це зробити за допомогою jQuery .. це було б так ...

<h2>test</h2>

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

Я думаю, ви шукаєте animation-fill-modeвластивість CSS3

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

Властивість CSS режиму анімації-заповнення вказує, як анімація CSS повинна застосовувати стилі до своєї цілі до і після її виконання.

для вашої мети просто спробуйте встановити

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

Встановлення значення переадресації «ціль збереже обчислені значення, встановлені останнім ключовим кадром, який зустрічався під час виконання»

На додаток до відповіді на @Fabrizio Calderan , це повинно бути сказано , що ви можете навіть застосувати animation-fill-modeвластивість forwardsбезпосередньо animation. Отже, також повинно працювати наступне:

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

Як анімувати елемент і змусити його залишатися в процесі анімації:

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

У мене щось подібне відбувалося зі мною. Я додав позицію: щодо елемента, який анімував і який зафіксував його для мене.