web-dev-qa-db-fra.com

Problème d'animation CSS Webkit - persistance de l'état final de l'animation?

Étant donné l'animation CSS3 suivante ....

<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>

Le texte Hello World s'anime comme prévu en descendant de 100 pixels. Cependant, à la fin de l'animation, il revient à sa position d'origine.

Cela a clairement du sens dans CSSland. L'animation a été appliquée et n'agit plus sur l'élément afin que les styles d'origine prennent effet. Cela me semble un peu étrange cependant - sûrement, si l'on anime un élément en place, on s'attendrait à ce que ce placement persiste?

Existe-t-il un moyen de rendre la position finale "collante" sans avoir à recourir à Javascript pour étiqueter un nom de classe ou un style sur l'élément à la fin de l'animation pour corriger ses propriétés modifiées? Je sais que les transitions persistent , mais pour l'animation que j'ai en question (l'exemple est uniquement à des fins de démonstration) les transitions ne donnent pas le niveau de contrôle nécessaire. Sans cela, il semble que les animations complexes ne sont utiles que pour les processus circulaires où l'élément se retrouve dans son état d'origine.

csscss3css-animations
70
Govan

Si vous définissez l'état final dans la classe, 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 de toute façon pilotée par les événements, vous devrez probablement utiliser un peu de JavaScript. Le moyen le plus simple est de faire en sorte que l'ajout de la classe avec l'état final déclenche le démarrage de l'animation.

--modifier

Voir réponse de Dino pour plus d'informations sur le animation-fill-mode propriété ajoutée dans le avril 2012 WD .

32
robertc

Vous pouvez utiliser -webkit-animation-fill-mode pour conserver l'état final (ou même étendre l'état initial vers l'arrière). Il a été ajouté à WebKit il y a un certain temps et expédié dans iOS 4 et Safari 5.

-webkit-animation-fill-mode: forwards;
145
dino

Juste pour ajouter aux bonnes réponses ici, vous pouvez utiliser un framework javascript tel que jQuery Transit qui gère les transitions CSS3 pour vous.

Selon le nombre de transitions/effets que vous effectuerez, cela peut être une meilleure solution pour garder votre code propre plutôt que de suivre un gros fichier CSS qui contient tous vos effets.

Il s'agit d'une doublure très simple qui accomplit ce que vous voulez:

Javascript: 

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

JS Fiddle Demo

1
ROFLwTIME

Je pense que ce que vous cherchez peut-être:

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

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

Cela devrait le laisser au bon endroit.

0
Michael Mullany

Encore une autre façon de le faire, juste pour les coups de pied,

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

.drop_box {
   position:absolute;
   top:100px;
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {

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

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

}
</style>

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