DEVENIR-WEBMASTER.COM Log In
 42
download link W3C close

Les animations

Visiter ma chaine Youtube

# Qu'est ce qu'une animation ? close

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 :

  1. 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.
    Première étape de mise en place d'une animation
  2. 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-name puis 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 utilisant animation-iteration-count: infinite;
    Deuxième étape de mise en place d'une animation
  3. Dans la troisième étape il va falloir décrire la séquence des différentes configurations CSS. On va utiliser une règle @keyframes que 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.
    Troisième étape de mise en place d'une animation

Cet exemple et son code ici

# Un exemple de fondu enchaîné entre deux images close

On place deux images dans un conteneur.

Code HTML de l'animation de fondu enchaîné

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.

Code CSS de l'animation de fondu enchaîné
logo HTML logo CSS

Cet exemple et son code ici

# Un exemple d'une bande d'images qui défilent dans une fenêtre close

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.

N images dans une fenêtre de P images

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.

Code HTML de l'animation image slide

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.

Code CSS de l'animation image slide

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 .....

Cet exemple et son code ici

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.