Comment créer des animations avec des images clés

Pour créer des effets animés sur votre site Web à afficher sur l'iPad et l'iPhone, vous devez utiliser des images clés. Plus complexe CSS 3 animations comptent sur les images clés. Les images-clés sont les points dans une animation où quelque chose change. Chaque fois que vous voulez changer un objet animé, vous devez créer une nouvelle image clé.

Par exemple, si vous souhaitez animer une balle qui rebondit, comme le montre cette figure, vous devez avoir une image clé au sommet du rebond et un autre au bas du rebond.

La balle qui rebondit avec des portions de secondes démarqués.
La balle qui rebondit avec des portions de secondes démarqués.

Dans cet exemple, la balle est de 50 pixels de diamètre et le conteneur pour le ballon est de 350 pixels de haut. La première image-clé, met par conséquent, le ballon au fond du récipient, et le dernier le place dans la partie supérieure du récipient.

Voici le code qui rend ce travail:

@ -webkit-images-clés rebondissent de {{margin: 300px auto 0-} pour {margin: 0 auto 0-}}

Un @ -webkit-images-clés bloc contient les règles qui définissent chaque image-clé. Une image clé définit le style pour ce moment au sein de l'animation. Vous pouvez avoir un début et une fin comme dans l'exemple montré ici, ou vous pouvez définir un certain nombre de points entre les deux. Certains navigateurs Web appliquent ce style plus facilement que d'autres, mais Safari sur l'iPhone et l'iPad font ce travail assez bien.

Dans ce simple exemple de balle qui rebondit, une animation appelé rebond est défini pour avoir deux images clés: une pour le début de l'animation (la de bloc) et une pour l'extrémité (la à bloc). Ces deux images clés se déplacent le ballon de le fond à le haut.

Lorsque vous définissez une animation avec un ensemble d'images clés, vous pouvez utiliser la suivante webkit-animation propriétés:

  • animation-name - définit l'animation utilisé. Pointer vers rebond, l'ensemble de l'image clé défini précédemment. Si le nom est introuvable (il est manquant ou mal orthographié), le navigateur prend la valeur par défaut de aucun et pas d'animation est produite:




    -webkit-animation-name: bounce-
  • animation-durée - définit la longueur de l'animation. Le format de la valeur de temps est un nombre suivi d'un identificateur d'unité de temps. Les identifiants d'unité de temps sont Mlle millisecondes et s pour les secondes (1000 ms, 1s). L'animation de la balle qui rebondit dure une seconde.

    La figure illustre comment le navigateur crée automatiquement le interpolée cadres - les trames entre le haut et le bas. Vous définissez le début et la fin et le navigateur remplit ce qui est “ en êtreentre.

    webkit-animation-durée: 1S-
  • animation-iteration-count - définit le nombre de fois un cycle d'animation est jouée. La valeur par défaut est 1, et cette valeur rend le jeu d'animation du début à la fin une fois. Une valeur de infini provoque l'animation de répéter toujours. Comme vous pouvez le deviner sur la base de cette information, dans l'exemple suivant, l'animation joue dix fois:

    -webkit-animation-iteration-count: 10-
  • animation-direction - définit si l'animation doit jouer à l'envers chaque autre cycle. Si alterné est spécifié, tous les deux cycles d'animation est lue dans le sens inverse. Quand une animation est jouée dans le sens inverse, les fonctions de synchronisation sont également inversés.

    Voilà pourquoi vous devez définir la balle comme ne rebondit de haut. L'animation de remplacement est joué en sens inverse, ce qui porte le ballon vers le bas de la boîte (un peu comme la gravité).

-webkit-animation-direction: alternate-

Mettez tout cela ensemble et la règle de style qui rend le travail d'animation de rebondir de la balle ressemble à ceci:

#animationDemo #ball {-webkit-animation-name: rebond - webkit-animation-durée: 1s - webkit-animation-iteration-count: 10 - webkit-animation-direction: alternate-}

Lorsque vous entrez dans une ou plusieurs propriétés, assurez-vous de suivre cet ordre:

  1. transition-propriété

  2. durée de transition

  3. transition-timing-function

  4. transition à retard

Utilisez la déclaration suivante pour le ballon rebondissant démonstration:

#animationDemo #ball {rebond 1s 10 alternate-}

Pour une liste complète des propriétés CSS vous pouvez animer en utilisant des transitions, visitez CSS Transitions Module Level 3.


» » » » Comment créer des animations avec des images clés