J'essaie de garder une propriété d'animation CSS après avoir terminé, est-ce possible?
C'est ce que j'essaie de réaliser ...
L'élément doit être masqué lorsque l'utilisateur arrive sur la page. Après 3 secondes (ou autre), il devrait apparaître en fondu en fondu et une fois l'animation terminée, elle devrait y rester.
Voici une tentative de violon ... http://jsfiddle.net/GZx6F/
Voici le code pour la conservation ...
<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 .. ce serait comme ça ...
<h2>test</h2>
<script>
$(document).ready(function(){
$('h2').hide().delay(3000).fadeIn(3000)
});
</script>
Je pense que vous recherchez une propriété CSS3 animation-fill-mode
https://developer.mozilla.org/en/CSS/animation-fill-mode
La propriété CSS animation-fill-mode spécifie comment une animation CSS doit appliquer des styles à sa cible avant et après son exécution.
pour votre but juste essayer de définir
h2 {
animation: fadeIn 1s ease-in-out 3s;
animation-fill-mode: forwards;
}
Réglage avant valeur "la cible conservera les valeurs calculées définies par la dernière image clé rencontrée lors de l'exécution"
En plus du réponse de @ Fabrizio Calderan , il faut dire que vous pouvez même appliquer le animation-fill-mode
property forwards
directement à animation
. Donc, ce qui suit devrait également fonctionner:
@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>
Comment animer un élément et le faire rester au fur et à mesure de l'animation:
// 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>
J'ai eu quelque chose de semblable à moi. J'ai ajouté position: par rapport à l'élément qui animait et qui le corrigeait pour moi.