Animations diverses en CSS CSS07

Cette série d’exercice est un entrainement pour manipuler les animations en CSS.

Avant de commencer l’exercice

Pour cet exercice, vous allez travailler dans un seul fichier HTML avec une feuille de style interne ou externe comme vous préférez. Le fait de travailler avec plusieurs animations sur un seul fichier CSS implique de la rigueur sur les sélecteurs CSS :

  • Favorisez des class génériques dès que possible,
  • Nommez vos id avec des noms clairs et non ambigus entre les exercices. Vous pouvez par exemple choisir des noms sous la forme id="exo3_cercle".

Attention
Pensez à bien observer le résultat dans un navigateur à chaque modification !

Consignes des exercices

Préparation

HTML : Construisez une page HTML avec une feuille de style externe ou interne.

CSS : Personnalisez le texte par défaut, ainsi que les éléments h1 et h2.

Les transitions

HTML : Insérez les éléments suivants :

  • Un titre de niveau 1 avec le texte : 1. Transitions
  • Un titre de niveau 2 avec le texte : 1.1. Exercices 1
  • Un élément div avec la class="forme_carre"

CSS : Appliquez les paramètres CSS à l’élément div créé précédemment :

  • Hauteur 100px / largeur 100px
  • Couleur d’arrière-plan de votre choix

HTML : Ajoutez l’id suivant à la forme créé précédemment sous la forme id="exo_1_1".

CSS : En utilisant son id, ajoutez un effet de transition au survol de l’élément :hover avec les critères suivants :

  • Modifiez la couleur d’arrière-plan
  • Durée de la transition : 3s

Les transitions 2

HTML : Insérez les éléments suivants :

  • Un titre de niveau 2 avec le texte : 1.2. Exercices 2
  • Un élément div avec la class="forme_carre exo1_2"
  • Insérez le texte Bouton dans le div que vous venez de créer

Remarque
Il est tout à fait possible de mettre plusieurs classe sur le même élément. Il suffit comme ici de séparer les noms des classes par un espace.

CSS : Ajoutez un effet de transition au survol de l’élément avec les critères suivants :

  • Modifiez la couleur d’arrière-plan et la couleur du texte
  • Durée de la transition : 500ms

HTML : Dupliquez la div pour avoir 4 boutons.

CSS : Modifiez l’affichage des boutons avec la propriété display: inline-block ;

Les transitions 3

HTML : Insérez les éléments suivants :

  • Un titre de niveau 2 avec le texte : 1.3. Exercices 3
  • Un élément div avec la class="forme_carre" et un id="exo_1_3"
  • Un élément div à l’intérieur du précédent avec un texte court.

CSS : En utilisant le sélecteur #exo_1_3 div, paramétrez l’élément contenant le texte selon les critères suivants :

  • Ajoutez une bordure de couleur
  • Ajoutez une marge intérieure à gauche de 100px
  • Ajoutez une hauteur de 100px

CSS : Paramétrez l’élément exo_1_3 selon les critères suivants :

  • Débordement masqué : overflow: hidden ;

CSS : Ajoutez un effet de transition au survol de l’élément contenant le texte avec les options suivantes :

  • Modifiez la marge intérieure pour la mettre à 0
  • Durée de la transition pour l’entrée de l’effet : 2s
  • Durée de la transition pour la sortie : 0.2s

Remarque
Pour pouvoir avoir une durée différente pour l’entrée et la sortie, vous devez paramétrez une durée de transition pour l’élément dans son état initial et dans son état survolé.

Les transitions 4

HTML : Insérez les éléments suivants :

  • Un titre de niveau 2 avec le texte : 1.4. Exercices 4
  • Un élément div avec la class="forme_carre" et un id="exo_1_4"
  • Un élément div à l’intérieur du précédent avec un texte court.

CSS : Paramétrez l’élément contenant le texte selon les critères suivants :

  • Ajoutez une bordure de couleur
  • Positionnez le afin qu’il se place à la droite du bloc forme_carre
  • Réduisez son opacité à 0

CSS : Ajoutez un effet de transition au survol de l’élément forme_carre pour l’élément contenant le texte

  • Augmentez son opacité à 1
  • Durée de la transition pour la sortie : 2s

Les animations 1

HTML : Insérez les éléments suivants :

  • Un titre de niveau 1 avec le texte : 2. Animations
  • Un titre de niveau 2 avec le texte : 2.1. Exercices 1
  • Un élément div avec la class="forme_carre" et un id="exo_2_1"

CSS : Ajoutez une animation à l’élément exo_2_1 avec les paramètres suivants :

  • Durée de l’animation 2s
  • Nombre d’itérations infini
  • Changement de la couleur d’arrière-plan

Les animations 2

HTML : Insérez les éléments suivants :

  • Un titre de niveau 2 avec le texte : 2.2. Exercices 2
  • Un élément div avec la class="forme_carre" et un id="exo_2_2"

CSS : Ajoutez une animation à l’élément exo_2_2 avec les paramètres suivants :

  • Durée de l’animation 2s
  • Nombre d’itérations infini
  • Direction de l’animation : alternate
  • Changement de la couleur d’arrière-plan

Les animations 3

HTML : Insérez les éléments suivants :

  • Un titre de niveau 2 avec le texte : 2.3. Exercices 3
  • Un élément div avec la class="forme_carre" et un id="exo_2_3"

CSS : Ajoutez une animation au survol de l’élément exo_2_3 avec les paramètres suivants :

  • Durée de l’animation 2s
  • Nombre d’itérations infini
  • Direction de l’animation : reverse
  • Changement de la couleur d’arrière-plan

Les animations 4

HTML : Insérez les éléments suivants :

  • Un titre de niveau 2 avec le texte : 2.4. Exercices 4
  • Un élément div avec la class="forme_carre" et un id="exo_2_4"

CSS : Positionnez l’élément au milieu de la fenêtre grâce aux propriétés CSS suivantes :

  • position: absolute ;
  • top: 25% ;
  • left: 25% ;
  • width: 50% ;
  • height: 50% ;

CSS : Ajoutez une animation à l’élément exo_2_4 avec les paramètres suivants :

  • Durée de l’animation 3s
  • Une seule itération
  • Modifiez la hauteur pour la mettre à 0
  • Modifiez l’opacité pour la mettre à 0

CSS : Modifiez l’animation pour ajouter les paramètres suivants :

  • Ajoutez un délai de 3s
  • animation-fill-mode: forwards ;

Les animations 5

HTML : Insérez les éléments suivants :

  • Un titre de niveau 2 avec le texte : 2.5. Exercices 5
  • Un élément div avec la class="forme_carre" et un id="exo_2_5"
  • Ajoutez du texte à l’intérieur de l’élément

CSS : Ajoutez une animation sur l’élément pour respecter les étapes suivantes :

Les transformations

HTML : Insérez les éléments suivants :

  • Un titre de niveau 1 avec le texte : 3. Transformations
  • Un titre de niveau 2 avec le texte : 3.1. Exercices 1
  • Un élément div avec la class="forme_carre" et un id="exo_3_1"
  • Ajoutez du texte à l’intérieur de l’élément

HTML : Dupliquez l’élément div 8 fois en personnalisant son id à chaque fois.

CSS : Ajoutez des transformations CSS aux différents objets pour obtenir le résultat suivant :

Les animations suite 1

HTML : Insérez les éléments suivants :

  • Un titre de niveau 1 avec le texte : 4. Mix
  • Un titre de niveau 2 avec le texte : 4.1. Exercices 1
  • Un élément div avec la class="forme_carre" et un id="exo_4_1"

CSS : Ajoutez une animation permettant de faire tourner le carré sur lui-même et le transformer en cercle.

Les animations suite 2

HTML : Insérez les éléments suivants :

  • Un titre de niveau 2 avec le texte : 4.2. Exercices 2
  • Un élément div avec la class="forme_carre" et un id="exo_4_2"

CSS : Ajoutez une animation permettant de faire tourner le carré sur lui-même, le transformer en cercle et le faire disparaître en rapetissant.

Les animations suite 3

HTML : Insérez les éléments suivants :

  • Un titre de niveau 2 avec le texte : 4.3. Exercices 3
  • Un élément div avec un id="exo_4_3"
  • Un élément avec la class="forme_carre" à l’intérieur id="exo_4_3"

CSS : Mettez en forme exo_4_3 en suivant les critères suivant :

  • Ajoutez une border de couleur
  • Paramétrez les dimensions suivantes : largeur 700px et hauteur 200px

CSS : Ajoutez une animation au bloc coloré pour le faire tourner aux quatre coin de l’élément exo_4_3 tout en tournant sur lui même. Comme illustré ci-dessous :

 

Cela peut vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.