Animations de base en CSS CSS34

L’objectif de cet exercice est de s’initier aux animations CSS.

Mise en place de l’exercice

Créez un dossier racine nommé css34.

Créez un fichier css34.html dans votre dossier racine avec le contenu de base d’une page HTML.

Créez un nouveau fichier style.css et liez-le à la page HTML.

Construisez une base de travail correspondant à l’illustration suivante :

Base de travail

Animations

Dupliquez la base de travail et ajoutez une classe au conteneur ou à l’élément enfant afin de pouvoir l’animer :

Effectuez les paramétrages CSS permettant d’obtenir l’animation suivante :

Animation 1

Dupliquez à nouveau la base de travail et appliquez les paramétrages CSS permettant d’obtenir l’animation suivante :

Animation 2

Dupliquez à nouveau la base de travail et appliquez les paramétrages CSS permettant d’obtenir l’animation suivante :

Animation 3

Dupliquez à nouveau la base de travail et appliquez les paramétrages CSS permettant d’obtenir l’animation suivante :

Animation 4

Dupliquez à nouveau la base de travail et appliquez les paramétrages CSS permettant d’obtenir l’animation suivante :

Animation 5

Dupliquez à nouveau la base de travail et appliquez les paramétrages CSS permettant d’obtenir l’animation suivante :

Animation 6