Webkit CSS problème d'Animation - la persistance de l'état de fin de l'animation?

Question

Le suivant CSS3 animation....

<style type="text/css" media="screen">

.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);
  }

}
</style>

<div class="drop_box">  
    Hello world
</div>

Bonjour le Monde du texte anime comme prévu de descendre à 100px. Cependant, à la fin de l'animation, il revient à sa position d'origine.

Manifestement, cela a du sens dans CSSland. L'animation a été appliquée et n'agit plus sur l'élément pour l'original de styles de prendre effet. Il semble un peu bizarre pour moi - sûrement, si l'un est l'animation d'un élément en place, alors on pourrait s'attendre que la mise à persister?

Est-il possible de faire de la position de fin de course "collantes", sans avoir recours à Javascript pour la balise d'un nom de classe ou de style sur l'élément à la fin de l'animation pour résoudre ses propriétés modifiées? Je sais que les transitions persistent, mais pour l'animation, j'ai en question (l'exemple est pour des fins de démonstration seulement) les transitions ne donnent pas le niveau de contrôle nécessaire. Sans cela, il semble que des animations complexes ne sont que de l'utilisation de processus circulaire où l'élément finit par revenir dans son état d'origine.

Answer 1

Vous pouvez utiliser -webkit-animation-fill-mode persistent à la fin de l'état (ou même prolonger le début de l'état à l'envers). Il a été ajouté à WebKit, il y a un moment, et expédiée dans iOS 4 et Safari 5.

-webkit-animation-fill-mode: forwards;

Answer 2

Si vous définissez la fin de l'état dans la classe, alors il devrait faire ce que vous voulez dans l'exemple:

.drop_box {
    -webkit-transform: translateY(100px);
    -webkit-animation-name: drop;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
}

Mais si votre animation est basé sur l'événement, de toute façon vous allez probablement finir par avoir à utiliser un peu de JavaScript. Le plus simple est de faire l'ajout de la classe à la fin de l'état dans il être ce qui déclenche de lancer l'animation.

--edit

Voir dino réponse pour plus d'informations sur l' animation-fill-mode ajout d'une propriété en avril 2012 WD.

Answer 3

Je pense que ce que vous avez besoin est cela:

-webkit-animation-fill-mode: forwards;

Answer 4

Juste pour ajouter à la grande réponses ici, vous pouvez utiliser un framework javascript comme jQuery Transit qui gère les transitions CSS3 pour vous.

En fonction du nombre de transitions/effets que vous aurez à faire, ce peut être une meilleure solution pour garder votre code propre plutôt que de les maintenir en place avec un grand fichier CSS qui a toutes vos effets.

C'est très simple, one-liner qui accomplit ce que vous voulez:

Javascript:

$(".drop_box").transition({y: "+=100px"}, 2000);

JS Fiddle Démo

Answer 5

Je pense que ce que vous pourriez être à la recherche de:

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

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

Cela devrait laisser au bon endroit.