Estou tentando fazer com que uma propriedade de animação CSS permaneça após a conclusão, isso é possível?
É isso que estou tentando alcançar ...
O elemento deve ser ocultado quando o usuário chega à página, após 3 segundos (ou o que for), ele deve aparecer gradualmente e assim que a animação for concluída, deve permanecer lá.
Aqui está uma tentativa de violino ... http://jsfiddle.net/GZx6F/
Aqui está o código para preservação ...
<h2>Test</h2>
<style>
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 0.9;
}
}
h2 {
animation: fadeIn 1s ease-in-out 3s;
}
</style>
Eu sei fazer isso com o jQuery .. seria assim ...
<h2>test</h2>
<script>
$(document).ready(function(){
$('h2').hide().delay(3000).fadeIn(3000)
});
</script>