Comment faire en sorte que les animations CSS3 dans WebKit conservent leur état final ?

Webkit CSS Animation persistant dans l'état final

Dans les animations CSS3, vous pouvez rencontrer un problème où l'élément animé revient à son état d'origine après l'animation se termine. Cela peut être attribué au fait que les animations sont des transformations temporaires appliquées à un élément, et une fois terminées, les styles d'origine de l'élément prennent le relais.

Cependant, il existe une solution de contournement qui vous permet de définir la position finale " collant." À l'aide de la propriété -webkit-animation-fill-mode, vous pouvez conserver l'état final d'une animation.

Par exemple, considérons l'animation CSS suivante :

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

@-webkit-keyframes drop {

  from {
    -webkit-transform: translateY(0px);
  }

  to {
    -webkit-transform: translateY(100px);
  }

}</code>

Après l'animation, l'élément reviendrait à sa position d'origine. Pour éviter cela, vous pouvez ajouter la ligne suivante au CSS :

<code class="css">-webkit-animation-fill-mode: forwards;</code>

Avec cet ajout, l'élément conservera sa position traduite (100px) même une fois l'animation terminée. Cette propriété a été introduite dans WebKit et est prise en charge dans iOS 4 et Safari 5 et versions ultérieures.

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!