Comment utiliser CSS3 Animations - mannequins

Le comportement de transformation est assez cool, mais CSS3 promet une forme d'animation encore plus excitante appelée le mécanisme d'animation (attendez-le). Voici une animation d'une boîte se déplaçant autour de l'écran.

Voici la stratégie de base pour créer une animation CSS:

Générer un ensemble d'images clés.

Les animations sont basées sur la notion d'images-clés. Chaque image clé spécifie l'état d'un objet et le navigateur tente de faire une transition en douceur entre les images clés.
Fournissez un pourcentage pour chaque image clé.

L'image clé commence par un pourcentage, indiquant l'emplacement de l'image clé dans l'animation. La première image clé doit être 0% (le début de l'animation) et la dernière doit être 100% (la fin de l'animation). Vous pouvez indiquer autant d'images clés intermédiaires que vous le souhaitez.
Ajoutez une mini-feuille de style pour chaque image clé.

Placez tous les styles que vous souhaitez modifier dans une petite feuille de style. À l'endroit indiqué dans la chronologie, un élément suivant cette animation affichera le comportement de style donné. Vous pouvez placer toutes les informations de style que vous voulez ici.
Appliquez l'animation à vos éléments.

La règle d'animation vous permet d'appliquer une image clé à un élément. Vous pouvez réutiliser les mêmes images clés parmi de nombreux éléments différents si vous le souhaitez.
Modifiez l'animation.

Vous pouvez appliquer plusieurs des mêmes caractéristiques à une animation que vous effectuez une transition. Il existe un certain nombre de paramètres, mais les éléments les plus couramment utilisés sont l'image clé, l'heure et la répétition.

Jetez un coup d'œil au code d'animation. html pour tout voir en action:

animation. html @keyframes anim {0% {gauche: 0px; en haut: 0px;} 25% {gauche: 100px; en haut: 0px;} 50% {gauche: 100px; en haut: 100px;} 75% {gauche: 0px; en haut: 100px;} 100% {gauche: 0px; en haut: 0px;}} @ -webkit-keyframes anim {0% {left: 0px; en haut: 0px;} 25% {gauche: 100px; en haut: 0px;} 50% {gauche: 100px; en haut: 100px;} 75% {gauche: 0px; en haut: 100px;} 100% {gauche: 0px; en haut: 0px;}} @ -moz-keyframes anim {0% {left: 0px; en haut: 0px;} 25% {gauche: 100px; en haut: 0px;} 50% {gauche: 100px; en haut: 100px;} 75% {gauche: 0px; en haut: 100px;} 100% {gauche: 0px; haut: 0px;}} @ -o-images-clés anim {0% {gauche: 0px; en haut: 0px;} 25% {gauche: 100px; en haut: 0px;} 50% {gauche: 100px; en haut: 100px;} 75% {gauche: 0px; en haut: 100px;} 100% {gauche: 0px; top: 0px;}} #box {position: absolue; bordure: 1px noir uni; -webkit-animation: anim 5s linéaire infini; -moz-animation: anim 5s linéaire infini; -o-animation: anim 5s linéaire infini; animation: anim 5s linear infinite;} Boîte de déplacement

Il y a un certain nombre de choses à noter sur cet exemple:

Créer une série d'images clés appelée La règle @keyframes est utilisée pour créer une page ressource de niveau qui peut être utilisée dans le reste du CSS.Dans ce cas, il est utilisé pour générer un ensemble d'images clés.
Construire des versions spécifiques au navigateur: Malheureusement, le mécanisme d'animation nécessite toujours des préfixes spécifiques au navigateur. Il est généralement plus facile de cibler un navigateur, puis de copier pour les autres navigateurs lorsque le comportement de base fonctionne.
Cet exemple déplace un élément dans un motif carré: Pour cet exemple particulier, un div bougera dans un mouvement carré. Lorsque vous regardez les images clés, vous verrez qu'un simple changement à la position gauche et supérieure de la div a été fait au fil du temps.
Début et fin identiques: Si vous prévoyez d'exécuter cette animation en continu, vous voulez que les points de début et de fin soient les mêmes.
Appliquez l'ensemble d'images clés anim à l'élément: Appliquez l'ensemble d'images clés anim en utilisant la règle d'animation.
Indiquez la durée de l'animation: Les animations concernent les changements dans le temps. La balise d'animation nécessite donc une durée, mesurée en secondes (s) ou en millisecondes (ms).
Déterminer l'assouplissement: L'assouplissement est la façon dont l'animation agit au début et à la fin d'un segment d'animation. La règle linéaire utilisée ici maintient l'animation à une vitesse constante. Vous pouvez également utiliser (le comportement par défaut) la facilité d'accès pour que l'élément se déplace à un taux variable.
Détermine le nombre de répétitions: Vous pouvez spécifier un nombre de fois pour répéter l'animation. Si vous laissez cette partie, l'animation ne se produira qu'une seule fois lors du premier chargement de la page. Vous pouvez spécifier infini pour que l'animation répète tant que la page est en mémoire.

Notez qu'il existe de nombreux autres paramètres que vous pouvez définir, tels que l'accélération et le délai. Ceux-ci peuvent être définis via la règle d'animation ou avec des règles individuelles. Pour l'instant, vous voudrez peut-être garder vos animations aussi simples que possible, au moins jusqu'à ce que les navigateurs puissent tous gérer les animations sans les préfixes des fournisseurs.