CSS Анимация остается после анимации

Question

Я пытаюсь получить свойство анимации 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> 

Answer 1

Я думаю, что вы ищете 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; 
} 

Установку вперед значение «цель будет сохранять вычисленные значения, установленные последним ключевым кадром, возникающий при исполнении»

Answer 2

В дополнении к answer от @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>

Answer 3

У меня было что-то подобное происходит со мной. Я добавил положение: относительно элемента, который был анимированным, и который исправил его для меня.