Comment utiliser des animations CSS3

La transformer comportement est assez cool, mais CSS3 promet une forme encore plus excitant de l'animation appelé (wait for it) Animation mécanisme. Voici une animation d'une boîte déplacer autour de l'écran.

Voici la stratégie de base pour la construction d'une animation CSS:

1. 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 la transition en douceur entre les images clés.

2. Fournir un pourcentage pour chaque image-clé.

   L'image-clé commence par un pourcentage, indiquant où dans l'animation l'image-clé qui va se passer. La première image clé doit être de 0% (le début de l'animation) et la dernière doit être de 100% (la fin de l'animation). Vous pouvez indiquer autant d'images clés intermédiaires que vous le souhaitez.

3. Ajouter une feuille de style pour chaque mini-clé.

   Placez tous les styles que vous voulez modifiés dans une feuille de style peu. À l'endroit indiqué dans le calendrier, un élément suivant cette animation affichera le comportement de style donné. Vous pouvez placer des informations de style que vous voulez ici.

4. 
   
   
   
   

   Appliquer l'animation à vos éléments.

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

5. Modifier l'animation.

   Vous pouvez appliquer un grand nombre des mêmes caractéristiques à une animation comme vous le faites d'une transition. Il ya un certain nombre de paramètres, mais les éléments les plus couramment utilisés sont l'image clé, le temps et la répétition.

Jetez un oeil sur le code pour animation.html de voir tout cela en action:

   
Boîte de déménagement

Il ya un certain nombre de choses à noter à propos de cet exemple:

• Créer un ensemble de images clés appelé La keyframes règle est utilisée pour créer une ressource niveau de la page qui peut être utilisé dans le reste de la CSS. Dans ce cas, elle est utilisée pour générer un ensemble d'images clés.

• Construire versions spécifiques au navigateur: Malheureusement, le mécanisme d'animation nécessite encore préfixes spécifiques au navigateur. Il est généralement plus facile de cibler un navigateur, puis 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 se déplacer dans un mouvement carré. Quand vous regardez les images clés, vous verrez que un simple changement à la position gauche et en haut de la div a été faite à travers le temps.

• Assurez début et la fin de la même: Si vous envisagez d'exécuter cette animation en continu, vous voulez que le début et la fin endroits pour être le même.

• Appliquer le anim image-clé mis à l'élément: Appliquer le anim image-clé définie en utilisant la animation régner.

• Indiquez la durée de l'animation: Les animations sont sur les changements au fil du temps, de sorte que le animation tag exige également une durée, mesuré en secondes (S) ou millisecondes (ms).

• Déterminer l'assouplissement: Assouplissement est ainsi l'animation agit au début et la fin d'un segment d'animation. La linéaire règle utilisée ici conserve l'animation à une vitesse constante. Vous pouvez également utiliser (le comportement par défaut) facilité in-out pour faire déplacer l'élément à un taux variable.

• Déterminer le nombre de répétitions: Vous pouvez spécifier un certain nombre de fois pour répéter l'animation. Si vous laissez cette partie, à l'animation se produira qu'une seule fois lorsque la première page des charges. Vous pouvez spécifier infinie pour faire la répétition de l'animation aussi longtemps que la page est en mémoire.

Notez qu'il existe de nombreux autres paramètres que vous pouvez définir, tels que assouplissement et retard. Ceux-ci peuvent être réglées grâce au animation règle ou des règles individuelles. Pour l'instant, vous pouvez garder vos animations aussi simple que possible, au moins jusqu'à ce que les navigateurs peuvent gérer tous les animations sans préfixes fournisseurs.