Les animations
#1
Qu'est ce qu'une animation ?
Une animation est une séquence de différentes configurations CSS d'un élément HTML qui se succèdent dans le temps.
La création de l'animation se fait en trois étapes :
- Dans la première étape il va falloir créer l'élément HTML que l'on va animer. On va le créer dans une configuration CSS initiale. Ici je décide d'animer un rectangle de cent pixels sur cent pixels. Je l'implante en HTML et je lui donne une configuration CSS initiale.
- Dans la deuxième étape il faut décrire l'animation elle même. Au minimum il faut lui donner un nom en utilisant la propriété
animation-namepuis spécifier sa durée en utilisant la propriétéanimation-duration. Ici je précise aussi que l'animation itérera indéfiniment en utilisantanimation-iteration-count: infinite; - Dans la troisième étape il va falloir décrire la séquence des différentes configurations CSS. On va utiliser une règle
@keyframesque l'on va associer au nom de l'animation. Puis dans cette règle on va découper le temps en tranches de 0% à 100% de la durée de l'animation. Enfin pour chaque tranche on va définir la configuration CSS de l'élément sur lequel porte l'animation. Ici on fait varier la largeur du rectangle.
#2
Un exemple de fondu enchaîné entre deux images
On place deux images dans un conteneur.
Le conteneur est positionné en relative. Les deux images sont positionnées en absolute. Le conteneur est un ancêtre positionné pour ces deux images. Les deux images se superposent. La dernière dans le code HTML est par dessus la première.
Dans l'animation on va intervenir sur l'opacité de l'image de dessus pour la rendre tour à tour opaque puis transparente. Evidemment quand elle devient transparente on voit l'image de dessous. C'est là que se produit l'effet de fondu enchaîné.
Dans cet exemple on utilise une nouvelle propriété animation-direction. Ici avec la valeur alternate l'animation sera rejouée en sens inverse lorsque celle-ci se terminera dans le sens normal.
#3
Un exemple d'une bande d'images qui défilent dans une fenêtre
Supposons que nous ayons N images (ici 7) et que l'on veuille les faire défiler dans une fenêtre de la taille de P images (ici 3)
Il faudra faire N-P décalages (ici 7-3 soit 4) et diviser l'intervalle de temps en N-P+1 (ici 7-3+1 soit 5) intervalles de temps.
Dans notre exemple nos images sont de forme carrée et ont un côté de 204 pixels. On va les présenter dans des conteneurs de 220 pixels de côté. Elles seront centrées horizontalement et verticalement dans ces conteneurs.
La bande d'image est placée dans une liste ul avec une image dans chaque li. La bande va défiler dans le #conteneur.
La liste ul est gérée en display:table; et chaque li en display:table-cell; de façon à constituer une bande horizontale de N images.
Chaque li aura une taille de 220px par 220px.
La taille de ul sera de N fois 220px soit ici de 7 * 220px = 1540px.
La taille du #conteneur sera de P images soit ici de 3 * 220px = 660px.
On utilise ici la propriété raccourcie animation qui contient les valeurs de animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction.
Pour connaître le nombre d'étapes de l'animation on divise l'intervalle de durée de 100% par 5 ce qui fait 20%.
L'animation dure 20 secondes. Chaque étape durera 4 secondes.
La première étape de l'animation ira de 0% à 20% et il n'y aura pas de décalage.
La deuxième étape de l'animation ira de 20% à 40% et il y aura 1 décalage de 220px.
La troisième étape de l'animation .....
Vous pouvez utiliser les mots-clés from à la place du 0% et to à la place du 100%. Ce sont juste des alias qui ne changent rien au fonctionnement de l'animation.
