Comment contrôler vos animations CSS3
Voici une propriété d'animation CSS3 que vous pourriez ne pas connaître. Le-webkit-animation-fill-mode de propriété. Il offre un contrôle précis sur vos animations CSS3 keyframe.
CSS3 Poo Fly
DISCLAIMER-Désolé, ces exemples ne fera que travailler en-webkit navigateurs comme Chrome et Safari.
Syntaxe et les paramètres:
-Webkit-animation-fill-mode: none / arrière / avant / deux;Valeurs:
* Aucun - Les effets de l'animation sont apparentes uniquement pendant la durée définie de l'animation.
* Avant - dernière image clé de l'animation continue à s'appliquer après la dernière itération de l'animation est terminée.
* Arrière - première image-clé de l'animation est appliquée dès que le style d'animation est appliquée à un élément. Cela affecte uniquement les animations qui ont une valeur différente de zéro pour-webkit-animation-retard.
* À la fois - de l'animation keyframe initiales est appliquée dès que le style d'animation est appliquée à un élément, et image-clé finale de l'animation continue à s'appliquer après la dernière itération de l'animation est terminée. La première image clé affecte uniquement les animations qui ont une valeur différente de zéro pour-webkit-animation-retard.
Je vais vous le donner en termes simples:
none - vous ne voyez les effets de l'animation tandis que les images clés @ courent.http://css3animator.com/examples/animation-fill-mode/none.html
1. Dans l'exemple suivant nous allons cliquer sur la boule rouge.
2. Après un retard de 2 secondes, la balle rouge devient vert et rebondir à quelques reprises.
3. Il reviendra ensuite à sa position de départ et de revenir au rouge.
Parce-webkit-animation-fill-mode: none; a été appliqué. Il revient à son état d'origine avant l'animation.avant - la dernière image clé @ s'affiche une fois l'animation est terminée.http://css3animator.com/examples/animation-fill-mode/forwards.html
1. Dans l'exemple suivant nous allons cliquer sur la boule rouge.
2. Après un retard de 2 secondes, la balle rouge devient vert et rebondir à quelques reprises.
3. Il restera alors à la position inférieure et de couleur verte.
Parce-webkit-animation-fill-mode: en avant; a été appliqué. Il permet d'afficher la dernière image clé @ fois l'animation est terminée.arrière - la première image clé @ n'est affiché que pour la quantité de temps que l'animation keyframe @ est retardée. Vous DEVEZ avoir un non-nul, la valeur positive pour la-webkit-animation-delay propriété.http://css3animator.com/examples/animation-fill-mode/backwards.html
1. Dans l'exemple suivant nous allons cliquer sur la boule rouge.
2. La balle rouge devient vert et maintenez pendant un délai de 2 secondes.
3. Ensuite, il va rebondir à quelques reprises.
4. Il reviendra ensuite à sa position de départ et de revenir au rouge.
Parce-webkit-animation-fill-mode: en arrière; a été appliqué. Il permet d'afficher la première image-clé @ pendant le délai d'animation.deux - le premier @ keyframe n'est affiché que pour la quantité de temps que l'image clé @ est retardée. Une fois que l'animation est terminée c'est itération finale, la dernière image clé @ est affichée. Vous DEVEZ avoir un non-nul, la valeur positive pour la-webkit-animation-delay propriété.http://css3animator.com/examples/animation-fill-mode/both.html
1. Dans l'exemple suivant nous allons cliquer sur la boule rouge.
2. La balle rouge devient vert et maintenez pendant un délai de 2 secondes.
3. Ensuite, il va rebondir à quelques reprises.
4. Il restera alors à la position inférieure et de couleur verte.
Parce-webkit-animation-fill-mode: à la fois; a été appliqué. Il permet d'afficher la première image-clé @ pendant le délai d'animation. Puis il affichera la dernière image clé @ fois l'animation est terminée.
Donc là vous l'avez. Pourtant, je n'aime pas vous laisser avec juste quelques cercles ennuyeuse rebondir ...
CSS3 Poo Fly
DISCLAIMER-Désolé, ces exemples ne fera que travailler en-webkit navigateurs comme Chrome et Safari.
Syntaxe et les paramètres:
-Webkit-animation-fill-mode: none / arrière / avant / deux;Valeurs:
* Aucun - Les effets de l'animation sont apparentes uniquement pendant la durée définie de l'animation.
* Avant - dernière image clé de l'animation continue à s'appliquer après la dernière itération de l'animation est terminée.
* Arrière - première image-clé de l'animation est appliquée dès que le style d'animation est appliquée à un élément. Cela affecte uniquement les animations qui ont une valeur différente de zéro pour-webkit-animation-retard.
* À la fois - de l'animation keyframe initiales est appliquée dès que le style d'animation est appliquée à un élément, et image-clé finale de l'animation continue à s'appliquer après la dernière itération de l'animation est terminée. La première image clé affecte uniquement les animations qui ont une valeur différente de zéro pour-webkit-animation-retard.
Je vais vous le donner en termes simples:
none - vous ne voyez les effets de l'animation tandis que les images clés @ courent.http://css3animator.com/examples/animation-fill-mode/none.html
1. Dans l'exemple suivant nous allons cliquer sur la boule rouge.
2. Après un retard de 2 secondes, la balle rouge devient vert et rebondir à quelques reprises.
3. Il reviendra ensuite à sa position de départ et de revenir au rouge.
Parce-webkit-animation-fill-mode: none; a été appliqué. Il revient à son état d'origine avant l'animation.avant - la dernière image clé @ s'affiche une fois l'animation est terminée.http://css3animator.com/examples/animation-fill-mode/forwards.html
1. Dans l'exemple suivant nous allons cliquer sur la boule rouge.
2. Après un retard de 2 secondes, la balle rouge devient vert et rebondir à quelques reprises.
3. Il restera alors à la position inférieure et de couleur verte.
Parce-webkit-animation-fill-mode: en avant; a été appliqué. Il permet d'afficher la dernière image clé @ fois l'animation est terminée.arrière - la première image clé @ n'est affiché que pour la quantité de temps que l'animation keyframe @ est retardée. Vous DEVEZ avoir un non-nul, la valeur positive pour la-webkit-animation-delay propriété.http://css3animator.com/examples/animation-fill-mode/backwards.html
1. Dans l'exemple suivant nous allons cliquer sur la boule rouge.
2. La balle rouge devient vert et maintenez pendant un délai de 2 secondes.
3. Ensuite, il va rebondir à quelques reprises.
4. Il reviendra ensuite à sa position de départ et de revenir au rouge.
Parce-webkit-animation-fill-mode: en arrière; a été appliqué. Il permet d'afficher la première image-clé @ pendant le délai d'animation.deux - le premier @ keyframe n'est affiché que pour la quantité de temps que l'image clé @ est retardée. Une fois que l'animation est terminée c'est itération finale, la dernière image clé @ est affichée. Vous DEVEZ avoir un non-nul, la valeur positive pour la-webkit-animation-delay propriété.http://css3animator.com/examples/animation-fill-mode/both.html
1. Dans l'exemple suivant nous allons cliquer sur la boule rouge.
2. La balle rouge devient vert et maintenez pendant un délai de 2 secondes.
3. Ensuite, il va rebondir à quelques reprises.
4. Il restera alors à la position inférieure et de couleur verte.
Parce-webkit-animation-fill-mode: à la fois; a été appliqué. Il permet d'afficher la première image-clé @ pendant le délai d'animation. Puis il affichera la dernière image clé @ fois l'animation est terminée.
Donc là vous l'avez. Pourtant, je n'aime pas vous laisser avec juste quelques cercles ennuyeuse rebondir ...
0 التعليقات:
Enregistrer un commentaire