Comment faire en sorte que les animations CSS3 restent une fois terminées ?

Préserver le résultat final des animations CSS3

Dans votre animation CSS, le texte "Hello World" descend comme prévu, mais il revient à sa position d'origine une fois terminé. Ce comportement est naturel lorsque l'animation se termine et que les styles d'origine reprennent. Cependant, vous préférerez peut-être que le résultat final persiste.

Pour y parvenir, vous pouvez exploiter la propriété -webkit-animation-fill-mode. Introduite dans WebKit et implémentée dans iOS 4 et Safari 5, cette propriété vous permet de choisir si l'animation persiste (soit à la fin, soit au début) ou se réinitialise à son état d'origine une fois terminée.

En définissant -webkit- animation-fill-mode vers l'avant, l'état final de l'animation sera préservé. Cela vous permet de conserver les propriétés modifiées, même une fois l'animation terminée. Voici le CSS mis à jour :

<code class="css">.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
}</code>

Avec cela, le texte "Hello World" descendra de 100 px et y restera indéfiniment, conservant le résultat final de l'animation sans nécessiter de transitions JavaScript ou CSS supplémentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!