Tutoriel complet sur les animations et transitions CSS

Tutoriel complet sur les animations et transitions CSS

Ce guide complet vise à explorer en profondeur les animations et transitions CSS, des bases aux techniques les plus avancées, tout en soulignant un avantage majeur : l’absence de nécessité d’utiliser JavaScript.

L’utilisation exclusive de CSS pour les animations offre non seulement une meilleure performance, mais aussi une plus grande simplicité dans la mise en œuvre, rendant votre site web plus rapide et plus réactif. Ce guide vous fournira toutes les informations nécessaires pour maîtriser cet art délicat, en commençant par les fondamentaux et en progressant vers des techniques plus sophistiquées.

Table des matières

L’un des principaux avantages de l’utilisation des animations CSS par rapport à JavaScript est la performance. Les animations CSS sont traitées par le navigateur de manière plus efficace, réduisant ainsi la charge sur le processeur et améliorant l’expérience utilisateur, surtout sur les appareils mobiles. De plus, elles sont plus simples à implémenter et à maintenir.

Créer des Animations CSS

Pour créer des animations en CSS, nous avons besoin de deux choses. La règle @keyframes et la propriété animation.

La règle @keyframes

@keyframes: La fondation de l’Animation

  • @keyframes est utilisé pour définir les étapes clés et le style d’un élément à différents moments de l’animation.
  • Il s’agit de décrire le « quoi » de l’animation : quels styles changeront et à quels moments (en pourcentage de la durée de l’animation).

Exemple :

				
					@keyframes exemple {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

				
			

Cette règle définit une animation nommée exemple où l’élément commence complètement transparent et devient entièrement opaque.

@keyframes : Étapes Intermédiaires

Vous pouvez ajouter des étapes intermédiaires en spécifiant un pourcentage de progression de l’animation.

				
					@keyframes nomDeLAnimation {
    0% { /* Styles au début */ }
    25% { /* Styles à 25% de l'animation */ }
    50% { /* Styles à mi-chemin */ }
    75% { /* Styles à 75% de l'animation */ }
    100% { /* Styles à la fin */ }
}

				
			

@keyframes : Propriétés Animables

Presque toutes les propriétés CSS peuvent être animées. Cela inclut : 

  • color
  • background-color
  • transform
  • opacity
  • left/right/top/bottom
  • width, height ...

La propriété Animation

  • La propriété animation est utilisée pour appliquer une animation définie par @keyframes à un élément HTML.
  • Elle s’occupe du « comment » et du « quand » de l’animation : comment l’animation se déroulera (durée, retard, nombre de fois, etc.).

Exemple :

				
					@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

div {
  animation: fadeIn 3s ease-in 1s 1 normal forwards;
}

				
			

Dans cet exemple, fadeIn est une animation créée avec @keyframes qui change l’opacité. La propriété animation l’applique aux divs, avec une durée de 3 secondes, un retard de 1 seconde, et l’animation se joue une seule fois et se termine dans son état final.

Les sous-propriétés de Animation

La propriété animation de CSS est un raccourci puissant qui combine plusieurs sous-propriétés en une seule déclaration.

  • animation-name: Le nom de l’animation, qui fait référence à une série de keyframes définis.
  • animation-duration: La durée totale de l’animation, généralement exprimée en secondes (s) ou en millisecondes (ms).
  • animation-timing-function: Décrit comment l’animation progresse dans le temps, avec des valeurs comme linear, ease, ease-in, ease-out, et ease-in-out.
  • animation-delay: Le délai avant le début de l’animation.
  • animation-iteration-count: Le nombre de fois que l’animation sera répétée.
  • animation-direction: Indique si l’animation doit se jouer en arrière à certains cycles (valeurs comme normal, reverse, alternate, alternate-reverse).
  • animation-fill-mode: Décide du style de l’élément avant et après l’exécution de l’animation.
  • animation-play-state: Permet de mettre en pause et de reprendre l’animation (paused ou running).

Chacune de ces sous-propriétés joue un rôle spécifique dans la définition du comportement de votre animation.

				
					@keyframes exemple {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  animation-name: exemple;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

				
			

1. Règle @keyframes :

    • @keyframes exemple : Ceci crée une nouvelle animation nommée exemple.
    • from {background-color: red;} : Au début de l’animation (0%), la couleur de fond de l’élément ciblé deviendra rouge.
    • to {background-color: yellow;} : À la fin de l’animation (100%), la couleur de fond de l’élément ciblé changera en jaune.

Cette définition crée une transition fluide de la couleur de fond de rouge à jaune pendant la durée de l’animation.

2. Application de l’Animation sur un Élément div :

  • animation-name: exemple; :
      • Cela applique l’animation nommée exemple (définie précédemment) à l’élément div.
  • animation-duration: 2s; :
      • La durée totale de l’animation est de 2 secondes. Cela signifie que le changement de couleur de rouge à jaune se déroulera sur une période de 2 secondes.
  • animation-timing-function: ease-in-out; :
      • Cette fonction d’accélération signifie que l’animation commencera lentement (ease-in), s’accélérera au milieu, puis ralentira à nouveau vers la fin (ease-out), créant un effet plus naturel.
  • animation-delay: 1s; :
      • L’animation commencera avec un délai d’une seconde après le chargement de l’élément.
  • animation-iteration-count: infinite; :
      • L’animation se répétera indéfiniment.
  • animation-direction: alternate; :
      • À chaque itération, l’animation alternera la direction de son déroulement. Après avoir atteint la fin de la première animation (jaune), elle reviendra à son point de départ (rouge) pour la prochaine itération, créant ainsi un effet de va-et-vient.

Pour resumer Interrelation et Usage Ensemble

  • @keyframes et animation travaillent ensemble pour créer une animation complète.
  • @keyframes définit le style de l’animation, tandis que animation l’applique et contrôle son comportement temporel.
  • Sans @keyframes, animation n’a pas de style d’animation à appliquer.
  • Sans la propriété animation, les styles définis dans @keyframes ne seront pas appliqués

Exemples de base d'animation en CSS

Voici quelques exemples simples pour démarrer :

  1. Animation de Fondu : Faire apparaître progressivement un élément.
  2. Animation de Déplacement : Déplacer un élément de gauche à droite.
  3. Animation de Rotation : Faire tourner un élément sur lui-même.

Animation de Fondu

Le code ci-dessous crée un effet où le texte dans le div apparaît progressivement, passant de complètement transparent à complètement visible en 2 secondes. C’est un moyen simple et efficace d’ajouter de l’interaction visuelle à un site web sans utiliser JavaScript.

				
					<!DOCTYPE html>
<html lang="fr">
<head>

<title>Animation en CSS - Fondu</title>
<style>
  h1 {
    text-align: center;
    margin-top: 30px;
  }

  .fade-in {
    animation: fadeInAnimation 2s;
  }

  @keyframes fadeInAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
  }
</style>
</head>
<body>
<h1>Animation en CSS</h1>
<h2>Fondu</h2>
<div class="fade-in">Je suis un texte qui apparaît progressivement !</div>
<script>"use strict";function wprRemoveCPCSS(){var preload_stylesheets=document.querySelectorAll('link[data-rocket-async="style"][rel="preload"]');if(preload_stylesheets&&0<preload_stylesheets.length)for(var stylesheet_index=0;stylesheet_index<preload_stylesheets.length;stylesheet_index++){var media=preload_stylesheets[stylesheet_index].getAttribute("media")||"all";if(window.matchMedia(media).matches)return void setTimeout(wprRemoveCPCSS,200)}var elem=document.getElementById("rocket-critical-css");elem&&"remove"in elem&&elem.remove()}window.addEventListener?window.addEventListener("load",wprRemoveCPCSS):window.attachEvent&&window.attachEvent("onload",wprRemoveCPCSS);</script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script><noscript><link data-minify="1" rel='stylesheet' id='rhstyle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/style.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhslidingpanel-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/slidingpanel.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcompare-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/dynamiccomparison.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='wp-block-library-css' href='https://www.booglit.com/wp-includes/css/dist/block-library/style.min.css?ver=6.4.4' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='tablepress-default-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/tablepress/css/build/default.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-legacy-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend-legacy.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-4882-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-4882.css?ver=1705234873' type='text/css' media='all' /><link rel='stylesheet' id='elementor-pro-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/frontend.min.css?ver=3.3.5' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-5-all-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/all.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='font-awesome-4-shim-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/v4-shims.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-7766-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-7766.css?ver=1705234873' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='eggrehub-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/eggrehub.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rehubicons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/iconstyle.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhsingle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/single.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='epic-icon-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/epic-news-element/assets/fonts/jegicon/jegicon.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/font-awesome.min.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='epic-style-css' href='https://www.booglit.com/wp-content/plugins/epic-news-element/assets/css/style.min.css?ver=6.4.4' type='text/css' media='all' /><link rel='stylesheet' id='elementor-icons-shared-0-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/fontawesome.min.css?ver=5.15.3' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-fa-solid-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/solid.min.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcolumnmenu-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/columnmenu.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='prismjs_style-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/modules/code-highlight.min.css?ver=1.23.0' type='text/css' media='' /><link data-minify="1" rel='stylesheet' id='rhcomments-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/comments.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhuserreviews-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/userreviews.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='e-animations-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/animations/animations.min.css?ver=3.5.6' type='text/css' media='all' /></noscript></body>
</html>

				
			

Cette animation de fondu est un exemple classique pour montrer comment un élément peut passer progressivement de l’invisible au visible grâce aux animations CSS. Voici le détail de chaque partie du code :

				
					<div class="fade-in">Je suis un texte qui apparaît progressivement !</div>

				
			

Ici, nous avons un élément div avec la classe fade-in. Cette classe sera liée à notre animation définie dans le CSS.

				
					.fade-in {
  animation: fadeInAnimation 2s;
}

				
			
  • .fade-in : C’est le sélecteur CSS qui cible notre div. Il applique les styles définis à tous les éléments ayant la classe fade-in.
  • animation: C’est la propriété CSS utilisée pour appliquer l’animation.
    • fadeInAnimation: Le nom de l’animation, qui doit correspondre au nom donné dans la règle @keyframes (voir ci-dessous).
    • 2s: La durée de l’animation, ici fixée à 2 secondes.
				
					@keyframes fadeInAnimation {
  from { opacity: 0; }
  to { opacity: 1; }
}


				
			

@keyframes fadeInAnimation : Cette règle définit les étapes clés de l’animation.

Le nom fadeInAnimation est le même que celui utilisé dans la propriété animation.

  • from { opacity: 0; } : Le point de départ de l’animation. opacity: 0; signifie que l’élément est totalement transparent au début.
  • to { opacity: 1; } : Le point d’arrivée de l’animation. opacity: 1; indique que l’élément devient totalement opaque à la fin de l’animation.

Animation de Déplacement

voici un exemple d’animation de déplacement qui illustre comment déplacer un élément de gauche à droite en utilisant les animations CSS.

				
					<!DOCTYPE html>
<html lang="fr">
<head>

<title>Animation en CSS - Déplacement</title>
<style>
  h1 {
    text-align: center;
    margin-top: 30px;
  }

  .slide-right {
    animation: slideRightAnimation 2s;
  }

  @keyframes slideRightAnimation {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
  }
</style>
</head>
<body>
<h1>Animation en CSS</h1>
<h2>Déplacement</h2>
<div class="slide-right">Je me déplace vers la droite !</div>
<noscript><link data-minify="1" rel='stylesheet' id='rhstyle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/style.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhslidingpanel-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/slidingpanel.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcompare-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/dynamiccomparison.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='wp-block-library-css' href='https://www.booglit.com/wp-includes/css/dist/block-library/style.min.css?ver=6.4.4' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='tablepress-default-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/tablepress/css/build/default.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-legacy-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend-legacy.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-4882-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-4882.css?ver=1705234873' type='text/css' media='all' /><link rel='stylesheet' id='elementor-pro-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/frontend.min.css?ver=3.3.5' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-5-all-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/all.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='font-awesome-4-shim-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/v4-shims.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-7766-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-7766.css?ver=1705234873' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='eggrehub-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/eggrehub.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rehubicons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/iconstyle.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhsingle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/single.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='epic-icon-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/epic-news-element/assets/fonts/jegicon/jegicon.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/font-awesome.min.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='epic-style-css' href='https://www.booglit.com/wp-content/plugins/epic-news-element/assets/css/style.min.css?ver=6.4.4' type='text/css' media='all' /><link rel='stylesheet' id='elementor-icons-shared-0-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/fontawesome.min.css?ver=5.15.3' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-fa-solid-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/solid.min.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcolumnmenu-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/columnmenu.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='prismjs_style-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/modules/code-highlight.min.css?ver=1.23.0' type='text/css' media='' /><link data-minify="1" rel='stylesheet' id='rhcomments-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/comments.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhuserreviews-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/userreviews.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='e-animations-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/animations/animations.min.css?ver=3.5.6' type='text/css' media='all' /></noscript></body>
</html>

				
			

Explications du code :

				
					.slide-right {
    animation: slideRightAnimation 2s;
  }

				
			
  • .slide-right : Sélectionne les éléments avec la classe slide-right.
      • animation: slideRightAnimation 2s; : Applique l’animation nommée slideRightAnimation d’une durée de 2 secondes.
				
					 @keyframes slideRightAnimation {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
  }

				
			
  • @keyframes slideRightAnimation : Définit les étapes clés de l’animation.
      • from { transform: translateX(0); } : Début de l’animation. L’élément commence sans déplacement horizontal.
      • to { transform: translateX(100px); } : Fin de l’animation. L’élément se déplace horizontalement de 100 pixels vers la droite.
				
					<div class="slide-right">Je me déplace vers la droite !</div>
				
			

Crée un conteneur pour l’animation. La classe slide-right applique l’animation de déplacement à cet élément.

Animation de Rotation

Voici une animation simple qui peut être créée avec quelques lignes de CSS et la propriété transform qui permet de faire tourner un élément.

				
					<!DOCTYPE html>
<html lang="fr">
<head>

<title>Animation en CSS - Rotation</title>
<style>
  h1 {
    text-align: center;
    margin-top: 30px;
  }

  .rotate {
    animation: rotateAnimation 2s infinite;
  }

  @keyframes rotateAnimation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>
</head>
<body>
<h1>Animation en CSS</h1>
<h2>Rotation</h2>
<div class="rotate">Je tourne !</div>
<noscript><link data-minify="1" rel='stylesheet' id='rhstyle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/style.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhslidingpanel-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/slidingpanel.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcompare-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/dynamiccomparison.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='wp-block-library-css' href='https://www.booglit.com/wp-includes/css/dist/block-library/style.min.css?ver=6.4.4' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='tablepress-default-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/tablepress/css/build/default.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-legacy-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend-legacy.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-4882-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-4882.css?ver=1705234873' type='text/css' media='all' /><link rel='stylesheet' id='elementor-pro-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/frontend.min.css?ver=3.3.5' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-5-all-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/all.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='font-awesome-4-shim-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/v4-shims.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-7766-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-7766.css?ver=1705234873' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='eggrehub-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/eggrehub.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rehubicons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/iconstyle.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhsingle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/single.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='epic-icon-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/epic-news-element/assets/fonts/jegicon/jegicon.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/font-awesome.min.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='epic-style-css' href='https://www.booglit.com/wp-content/plugins/epic-news-element/assets/css/style.min.css?ver=6.4.4' type='text/css' media='all' /><link rel='stylesheet' id='elementor-icons-shared-0-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/fontawesome.min.css?ver=5.15.3' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-fa-solid-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/solid.min.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcolumnmenu-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/columnmenu.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='prismjs_style-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/modules/code-highlight.min.css?ver=1.23.0' type='text/css' media='' /><link data-minify="1" rel='stylesheet' id='rhcomments-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/comments.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhuserreviews-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/userreviews.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='e-animations-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/animations/animations.min.css?ver=3.5.6' type='text/css' media='all' /></noscript></body>
</html>

				
			

Explications du code :

				
					.rotate {
    animation: rotateAnimation 2s infinite;
}
				
			
  • .rotate : Cible les éléments avec la classe rotate.
      • animation: rotateAnimation 2s infinite; : Applique l’animation nommée rotateAnimation à l’élément. L’animation dure 2 secondes (2s) et se répète indéfiniment (infinite).
				
					@keyframes rotateAnimation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
				
			
  • @keyframes rotateAnimation : Définit les étapes clés de l’animation rotateAnimation.
      • from { transform: rotate(0deg); } : L’état initial de l’animation. L’élément commence sans rotation (0 degrés).
      • to { transform: rotate(360deg); } : L’état final de l’animation. L’élément finit un tour complet (360 degrés).

L’animation fait tourner l’élément de 0 à 360 degrés, créant un effet de rotation continue. Le mot-clé infinite fait que cette rotation ne s’arrête jamais, donnant l’impression que l’élément tourne en continu.

				
					<div class="rotate">Je tourne !</div>
				
			

L’élément div contenant le texte à animer.

Créer des Transitions CSS

La propriété transition en CSS est un outil puissant qui permet de créer des changements d’état fluides et attrayants pour les éléments de votre site web. Elle est utilisée pour animer le passage d’un style à un autre, offrant une expérience visuelle plus riche et interactive. Cette section expliquera en détail comment la propriété transition fonctionne et comment l’utiliser efficacement.

Les sous-propriétés de Transition

La propriété transition se compose de plusieurs sous-propriétés :

  • transition-property : Détermine quelle propriété CSS sera animée. Par exemple, background-color, opacity, ou transform.
  • transition-duration : Indique la durée de l’animation. Elle peut être définie en secondes (s) ou millisecondes (ms).
  • transition-timing-function : Définit la vitesse de l’animation à différents moments. Les valeurs courantes incluent linear, ease, ease-in, ease-out, et ease-in-out.
  • transition-delay : Spécifie un délai avant le début de l’animation.

Exemples de base de transition en CSS

Voici plusieurs exemples de code pour illustrer l’utilisation de la propriété transition en CSS. Chaque exemple mettra en lumière une utilisation différente de cette propriété.

Changement de Couleur

Dans cet exemple, la couleur de fond d’un bouton change progressivement lors du survol.

				
					<!DOCTYPE html>
<html lang="fr">
<head>
    
    <title>Exemple de Transition CSS: Changement de Couleur</title>
    <style>
        /* Style pour le changement de couleur */
        button {
          background-color: green;
          color: white;
          padding: 10px 20px;
          border: none;
          cursor: pointer;
          transition: background-color 0.5s ease;
        }

        button:hover {
          background-color: blue;
        }
    </style>
</head>
<body>
    <h1>Animation en CSS</h1>
    <h2>Changement de Couleur</h2>
    <button>Survolez-moi</button>

<noscript><link data-minify="1" rel='stylesheet' id='rhstyle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/style.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhslidingpanel-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/slidingpanel.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcompare-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/dynamiccomparison.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='wp-block-library-css' href='https://www.booglit.com/wp-includes/css/dist/block-library/style.min.css?ver=6.4.4' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='tablepress-default-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/tablepress/css/build/default.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-legacy-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend-legacy.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-4882-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-4882.css?ver=1705234873' type='text/css' media='all' /><link rel='stylesheet' id='elementor-pro-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/frontend.min.css?ver=3.3.5' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-5-all-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/all.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='font-awesome-4-shim-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/v4-shims.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-7766-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-7766.css?ver=1705234873' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='eggrehub-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/eggrehub.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rehubicons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/iconstyle.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhsingle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/single.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='epic-icon-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/epic-news-element/assets/fonts/jegicon/jegicon.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/font-awesome.min.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='epic-style-css' href='https://www.booglit.com/wp-content/plugins/epic-news-element/assets/css/style.min.css?ver=6.4.4' type='text/css' media='all' /><link rel='stylesheet' id='elementor-icons-shared-0-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/fontawesome.min.css?ver=5.15.3' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-fa-solid-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/solid.min.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcolumnmenu-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/columnmenu.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='prismjs_style-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/modules/code-highlight.min.css?ver=1.23.0' type='text/css' media='' /><link data-minify="1" rel='stylesheet' id='rhcomments-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/comments.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhuserreviews-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/userreviews.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='e-animations-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/animations/animations.min.css?ver=3.5.6' type='text/css' media='all' /></noscript></body>
</html>

				
			
  • button: Définit le style initial du bouton :
      • background-color: green; : La couleur de fond initiale du bouton est verte.
      • color: white; : La couleur du texte est blanche.
      • padding: 10px 20px; : Définit l’espacement intérieur du bouton pour le rendre plus grand.
      • border: none; : Supprime la bordure du bouton.
      • cursor: pointer; : Change le curseur en un pointeur lorsqu’il survole le bouton.
      • transition: background-color 0.5s ease; : La partie clé. Cela indique que la propriété background-color doit animer le changement sur une période de 0,5 seconde. ease est une fonction de timing qui rend l’animation plus naturelle.
  • button:hover : Spécifie le style du bouton lorsqu’il est survolé :
      • background-color: blue; : Lorsque le bouton est survolé, sa couleur de fond change progressivement en bleu.

Lorsque l’utilisateur survole le bouton, la propriété transition appliquée au bouton déclenche une animation fluide qui change la couleur de fond de vert à bleu en 0,5 seconde. L’utilisation de ease dans la propriété transition assure que l’animation démarre lentement, s’accélère, puis ralentit à nouveau vers la fin, créant un effet visuel agréable.

Agrandissement d'un élément

Voici la transition pour agrandir un élément lorsque passe la souris par-dessus.

				
					<!DOCTYPE html>
<html lang="fr">
<head>
    
    <title>Exemple de Transition CSS: Agrandissement d'un Élément</title>
    <style>
        /* Style pour l'agrandissement d'un élément */
        .scale {
          width: 100px;
          height: 100px;
          background-color: red;
          transition: transform 0.3s ease-in-out;
        }

        .scale:hover {
          transform: scale(1.5);
        }
    </style>
</head>
<body>
   <h1>Animation en CSS</h1>
    <h2>Agrandissement d'un Élément</h2>
    <div class="scale"></div>

<noscript><link data-minify="1" rel='stylesheet' id='rhstyle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/style.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhslidingpanel-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/slidingpanel.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcompare-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/dynamiccomparison.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='wp-block-library-css' href='https://www.booglit.com/wp-includes/css/dist/block-library/style.min.css?ver=6.4.4' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='tablepress-default-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/tablepress/css/build/default.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-legacy-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend-legacy.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-4882-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-4882.css?ver=1705234873' type='text/css' media='all' /><link rel='stylesheet' id='elementor-pro-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/frontend.min.css?ver=3.3.5' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-5-all-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/all.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='font-awesome-4-shim-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/v4-shims.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-7766-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-7766.css?ver=1705234873' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='eggrehub-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/eggrehub.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rehubicons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/iconstyle.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhsingle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/single.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='epic-icon-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/epic-news-element/assets/fonts/jegicon/jegicon.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/font-awesome.min.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='epic-style-css' href='https://www.booglit.com/wp-content/plugins/epic-news-element/assets/css/style.min.css?ver=6.4.4' type='text/css' media='all' /><link rel='stylesheet' id='elementor-icons-shared-0-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/fontawesome.min.css?ver=5.15.3' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-fa-solid-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/solid.min.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcolumnmenu-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/columnmenu.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='prismjs_style-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/modules/code-highlight.min.css?ver=1.23.0' type='text/css' media='' /><link data-minify="1" rel='stylesheet' id='rhcomments-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/comments.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhuserreviews-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/userreviews.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='e-animations-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/animations/animations.min.css?ver=3.5.6' type='text/css' media='all' /></noscript></body>
</html>

				
			
  • .scale: Définit le style de base pour l’élément div avec la classe scale :
      • width et height: Définissent la taille initiale de l’élément.
      • background-color: red; : Donne à l’élément une couleur de fond rouge.
    • transition: transform 0.3s ease-in-out; : Applique une transition sur la propriété transform. L’animation dure 0,3 seconde et utilise un effet d’accélération et de décélération (ease-in-out) pour un rendu plus naturel.
  • .scale:hover : Définit le style de l’élément lorsqu’il est survolé :
      • transform: scale(1.5); : Agrandit l’élément de 50% par rapport à sa taille originale.

Lorsque l’utilisateur survole l’élément div avec la classe scale, l’élément s’agrandit progressivement, passant de sa taille originale à 150% de cette taille. L’effet est rendu fluide et naturel grâce à la propriété transition appliquée à la transformation. L’effet d’agrandissement est instantanément visible et offre une expérience interactive attrayante sur la page web.

Opacité et Visibilité

Changement d’opacité d’un élément au passage de la souris.

				
					<!DOCTYPE html>
<html lang="fr">
<head>
    
    <title>Exemple de Transition CSS: Opacité et Visibilité</title>
    <style>
        /* Style pour la transition d'opacité */
        .fade {
          width: 200px;
          height: 200px;
          background-color: blue;
          opacity: 1;
          transition: opacity 1s ease-in-out;
        }

        .fade:hover {
          opacity: 0.5;
        }
    </style>
</head>
<body>
    <h1>Animation en CSS</h1>
    <h2>Opacité et Visibilité</h2>
    <div class="fade"></div>

<noscript><link data-minify="1" rel='stylesheet' id='rhstyle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/style.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhslidingpanel-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/slidingpanel.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcompare-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/dynamiccomparison.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='wp-block-library-css' href='https://www.booglit.com/wp-includes/css/dist/block-library/style.min.css?ver=6.4.4' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='tablepress-default-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/tablepress/css/build/default.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-legacy-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend-legacy.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-4882-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-4882.css?ver=1705234873' type='text/css' media='all' /><link rel='stylesheet' id='elementor-pro-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/frontend.min.css?ver=3.3.5' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-5-all-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/all.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='font-awesome-4-shim-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/v4-shims.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-7766-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-7766.css?ver=1705234873' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='eggrehub-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/eggrehub.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rehubicons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/iconstyle.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhsingle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/single.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='epic-icon-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/epic-news-element/assets/fonts/jegicon/jegicon.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/font-awesome.min.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='epic-style-css' href='https://www.booglit.com/wp-content/plugins/epic-news-element/assets/css/style.min.css?ver=6.4.4' type='text/css' media='all' /><link rel='stylesheet' id='elementor-icons-shared-0-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/fontawesome.min.css?ver=5.15.3' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-fa-solid-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/solid.min.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcolumnmenu-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/columnmenu.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='prismjs_style-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/modules/code-highlight.min.css?ver=1.23.0' type='text/css' media='' /><link data-minify="1" rel='stylesheet' id='rhcomments-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/comments.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhuserreviews-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/userreviews.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='e-animations-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/animations/animations.min.css?ver=3.5.6' type='text/css' media='all' /></noscript></body>
</html>

				
			
  • .fade : Applique le style initial à l’élément div avec la classe fade :
      • width et height: Définissent la taille de l’élément.
      • background-color: blue; : Donne à l’élément une couleur de fond bleue.
      • opacity: 1; : L’élément est complètement opaque initialement.
      • transition: opacity 1s ease-in-out; : Crée une transition sur la propriété opacity qui dure 1 seconde, avec un effet d’accélération et de décélération pour une transition plus naturelle.
  • .fade:hover : Définit le style de l’élément lorsqu’il est survolé :
      • opacity: 0.5; : Réduit l’opacité à 50% lors du survol, rendant l’élément semi-transparent.

Lorsque l’utilisateur survole l’élément div, l’opacité de l’élément passe progressivement de 100% à 50%, créant un effet de fondu. Cette transition rend l’élément semi-transparent de manière fluide et visuellement attrayante, grâce à l’utilisation de la propriété transition sur l’opacité. Cela peut être particulièrement utile pour des éléments comme les images, les bannières ou tout autre élément graphique dont on souhaite moduler la visibilité.

Rotation d'un element

Voici comment créer la rotation d’un élément avec la propriété transition.

				
					<!DOCTYPE html>
<html lang="fr">
<head>
    
    <title>Exemple de Transition CSS: Rotation d'un Élément</title>
    <style>
        /* Style pour la rotation d'un élément */
        .rotate {
          display: inline-block;
          width: 100px;
          height: 100px;
          background-color: purple;
          color: white;
          text-align: center;
          line-height: 100px;
          transition: transform 2s;
        }

        .rotate:hover {
          transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <h1>Animation en CSS</h1>
    <h2>Rotation d'un Élément</h2>
    <div class="rotate">Tournez</div>

<noscript><link data-minify="1" rel='stylesheet' id='rhstyle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/style.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhslidingpanel-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/slidingpanel.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcompare-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/dynamiccomparison.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='wp-block-library-css' href='https://www.booglit.com/wp-includes/css/dist/block-library/style.min.css?ver=6.4.4' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='tablepress-default-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/tablepress/css/build/default.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-legacy-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend-legacy.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-4882-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-4882.css?ver=1705234873' type='text/css' media='all' /><link rel='stylesheet' id='elementor-pro-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/frontend.min.css?ver=3.3.5' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-5-all-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/all.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='font-awesome-4-shim-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/v4-shims.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-7766-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-7766.css?ver=1705234873' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='eggrehub-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/eggrehub.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rehubicons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/iconstyle.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhsingle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/single.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='epic-icon-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/epic-news-element/assets/fonts/jegicon/jegicon.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/font-awesome.min.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='epic-style-css' href='https://www.booglit.com/wp-content/plugins/epic-news-element/assets/css/style.min.css?ver=6.4.4' type='text/css' media='all' /><link rel='stylesheet' id='elementor-icons-shared-0-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/fontawesome.min.css?ver=5.15.3' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-fa-solid-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/solid.min.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcolumnmenu-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/columnmenu.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='prismjs_style-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/modules/code-highlight.min.css?ver=1.23.0' type='text/css' media='' /><link data-minify="1" rel='stylesheet' id='rhcomments-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/comments.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhuserreviews-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/userreviews.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='e-animations-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/animations/animations.min.css?ver=3.5.6' type='text/css' media='all' /></noscript></body>
</html>

				
			
  • .rotate : Applique le style initial au div :
      • display: inline-block; : Permet au div de se comporter comme un élément en ligne, mais de maintenir les propriétés de bloc.
      • width et height: Définissent la taille du div.
      • background-color: purple; : Couleur de fond de l’élément.
      • color: white; : Couleur du texte à l’intérieur du div.
      • text-align: center; et line-height: 100px; : Centrent le texte verticalement et horizontalement.
      • transition: transform 2s; : Indique que la propriété transform doit animer sur une durée de 2 secondes.
  • .rotate:hover : Définit le comportement du div lorsqu’il est survolé :
      • transform: rotate(360deg); : Fait tourner l’élément de 360 degrés autour de son axe central.

Changement de Hauteur

Voici comment changer la hauteur d’un élément avec la propriété transition.

				
					<!DOCTYPE html>
<html lang="fr">
<head>
    
    <title>Exemple de Transition CSS: Changement de Hauteur</title>
    <style>
        /* Style pour le changement de hauteur */
        .height-change {
          height: 100px;
          overflow: hidden;
          background-color: lightblue;
          transition: height 0.5s ease;
        }

        .height-change:hover {
          height: 200px;
        }
    </style>
</head>
<body>
    <h1>Animation en CSS</h1>
    <h2>Changement de Hauteur</h2>
    <div class="height-change">Survolez-moi</div>

<noscript><link data-minify="1" rel='stylesheet' id='rhstyle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/style.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhslidingpanel-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/slidingpanel.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcompare-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/dynamiccomparison.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='wp-block-library-css' href='https://www.booglit.com/wp-includes/css/dist/block-library/style.min.css?ver=6.4.4' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='tablepress-default-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/tablepress/css/build/default.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-legacy-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend-legacy.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-4882-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-4882.css?ver=1705234873' type='text/css' media='all' /><link rel='stylesheet' id='elementor-pro-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/frontend.min.css?ver=3.3.5' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-5-all-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/all.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='font-awesome-4-shim-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/v4-shims.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-7766-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-7766.css?ver=1705234873' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='eggrehub-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/eggrehub.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rehubicons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/iconstyle.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhsingle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/single.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='epic-icon-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/epic-news-element/assets/fonts/jegicon/jegicon.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/font-awesome.min.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='epic-style-css' href='https://www.booglit.com/wp-content/plugins/epic-news-element/assets/css/style.min.css?ver=6.4.4' type='text/css' media='all' /><link rel='stylesheet' id='elementor-icons-shared-0-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/fontawesome.min.css?ver=5.15.3' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-fa-solid-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/solid.min.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcolumnmenu-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/columnmenu.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='prismjs_style-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/modules/code-highlight.min.css?ver=1.23.0' type='text/css' media='' /><link data-minify="1" rel='stylesheet' id='rhcomments-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/comments.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhuserreviews-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/userreviews.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='e-animations-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/animations/animations.min.css?ver=3.5.6' type='text/css' media='all' /></noscript></body>
</html>

				
			
  • La hauteur initiale de cet élément est fixée à 100px, et lorsque l’utilisateur survole le <div>, sa hauteur s’agrandit jusqu’à 200px.
  • La propriété transition appliquée à la classe height-change spécifie que le changement de hauteur doit se produire sur une durée de 0.5s (demi-seconde), avec un effet d’animation ease pour un effet plus naturel.

Combinaison de Transitions et d'Animations en CSS

Les transitions et animations peuvent être combinées pour réagir aux actions de l’utilisateur, comme le survol ou le focus. Par exemple, un bouton peut changer graduellement de couleur avec une transition, puis déclencher une animation plus complexe lorsqu’il est cliqué ou survolé.

				
					button {
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #007bff;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

<button>Survolez-moi</button>


				
			

Cette animation fait bouger l’élément en changeant sa position à chaque quart de la durée totale de l’animation.

Des animations séquentielles peuvent être déclenchées pour créer un effet de chaîne. Par exemple, une série d’éléments peut s’animer l’un après l’autre pour créer un effet de cascade ou de vague.

				
					<!DOCTYPE html>
<html lang="fr">
<head>
    
    <title>Animation de Liste</title>
    <style>
        .list-item {
            animation: fadeIn 0.5s ease;
        }

        .list-item:nth-child(1) { animation-delay: 0s; }
        .list-item:nth-child(2) { animation-delay: 0.2s; }
        .list-item:nth-child(3) { animation-delay: 0.4s; }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <ul>
        <li class="list-item">Élément 1</li>
        <li class="list-item">Élément 2</li>
        <li class="list-item">Élément 3</li>
    </ul>
<noscript><link data-minify="1" rel='stylesheet' id='rhstyle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/style.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhslidingpanel-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/slidingpanel.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcompare-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/dynamiccomparison.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='wp-block-library-css' href='https://www.booglit.com/wp-includes/css/dist/block-library/style.min.css?ver=6.4.4' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='tablepress-default-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/tablepress/css/build/default.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-legacy-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend-legacy.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-frontend-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-4882-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-4882.css?ver=1705234873' type='text/css' media='all' /><link rel='stylesheet' id='elementor-pro-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/frontend.min.css?ver=3.3.5' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-5-all-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/all.min.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='font-awesome-4-shim-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/v4-shims.min.css?ver=3.5.6' type='text/css' media='all' /><link rel='stylesheet' id='elementor-post-7766-css' href='https://www.booglit.com/wp-content/uploads/elementor/css/post-7766.css?ver=1705234873' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='eggrehub-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/eggrehub.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rehubicons-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/iconstyle.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhsingle-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/single.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='epic-icon-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/epic-news-element/assets/fonts/jegicon/jegicon.css?ver=1705234861' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='font-awesome-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/font-awesome.min.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='epic-style-css' href='https://www.booglit.com/wp-content/plugins/epic-news-element/assets/css/style.min.css?ver=6.4.4' type='text/css' media='all' /><link rel='stylesheet' id='elementor-icons-shared-0-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/font-awesome/css/fontawesome.min.css?ver=5.15.3' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='elementor-icons-fa-solid-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/font-awesome/css/solid.min.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhcolumnmenu-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/columnmenu.css?ver=1705234861' type='text/css' media='all' /><link rel='stylesheet' id='prismjs_style-css' href='https://www.booglit.com/wp-content/plugins/elementor-pro/assets/css/modules/code-highlight.min.css?ver=1.23.0' type='text/css' media='' /><link data-minify="1" rel='stylesheet' id='rhcomments-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/comments.css?ver=1705235012' type='text/css' media='all' /><link data-minify="1" rel='stylesheet' id='rhuserreviews-css' href='https://www.booglit.com/wp-content/cache/min/1/wp-content/themes/rehub-theme/css/userreviews.css?ver=1705235012' type='text/css' media='all' /><link rel='stylesheet' id='e-animations-css' href='https://www.booglit.com/wp-content/plugins/elementor/assets/lib/animations/animations.min.css?ver=3.5.6' type='text/css' media='all' /></noscript></body>
</html>

				
			

Dans cet exemple, j’ai inclus trois éléments de liste (<li>), chacun avec la classe .list-item. L’animation CSS fadeIn est appliquée à ces éléments, avec des délais d’animation spécifiques pour chaque élément (nth-child(1), nth-child(2), et nth-child(3)), ce qui crée l’effet d’apparition séquentiel. Vous pouvez étendre cette liste en ajoutant plus d’éléments <li> et en ajustant les délais d’animation en conséquence.

La combinaison de transformations et de changements d’opacité peut créer des effets visuels sophistiqués. Par exemple, un élément peut se déplacer et s’estomper en même temps, créant un effet de mouvement fluide.

				
					.fade-move {
    transition: transform 0.5s, opacity 0.5s;
}

.fade-move:hover {
    transform: translateX(50px);
    opacity: 0.5;
}

				
			

Dans cet exemple, l’élément se déplace horizontalement tout en devenant plus transparent lorsqu’il est survolé.

Les animations peuvent être appliquées aux fonds et aux bordures pour créer des effets visuels uniques. Par exemple, une bordure animée ou un changement de fond dynamique peuvent ajouter un intérêt visuel à un élément.

				
					.animated-border {
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: border-color 0.3s;
}

.animated-border:hover {
    border-color: #007bff;
    animation: rotateBorder 2s linear infinite;
}

@keyframes rotateBorder {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}


				
			

Ici, la bordure de l’élément change de couleur lors du survol et déclenche une animation continue de rotation.

Ces exemples illustrent comment la combinaison de transitions et d’animations CSS peut créer des expériences utilisateur interactives et visuellement attrayantes. La clé est d’utiliser ces techniques de manière mesurée et intentionnelle pour améliorer l’interface utilisateur sans la surcharger.

Outils en ligne pour créer et tester des animations et transitions

L’un des aspects les plus captivants du design web moderne est la capacité à visualiser et à tester des animations et des transitions en temps réel, grâce à une variété d’outils en ligne. Ces plateformes permettent aux développeurs et designers de créer, d’expérimenter et de peaufiner leurs animations CSS sans avoir à passer par de multiples cycles de codage et de déploiement.

Voici quelques-uns des meilleurs outils disponibles :

  • CSS3 Animation Cheat Sheet :
      • Description : Cet outil offre une collection d’animations prédéfinies. Il est idéal pour ceux qui débutent avec les animations CSS et souhaitent comprendre comment elles fonctionnent.
      • Utilisation : Sélectionnez une animation pour obtenir le code CSS correspondant, que vous pouvez ensuite personnaliser selon vos besoins.
  • Animista :
      • Description : Animista est un outil interactif pour créer des animations CSS personnalisables. Avec son interface intuitive, vous pouvez choisir parmi une large gamme d’animations et les personnaliser pour les adapter à votre projet.
      • Utilisation : Sélectionnez un type d’animation, ajustez les paramètres et visualisez le résultat en temps réel. Le code généré peut être copié et intégré directement dans votre projet.
  • Cubic-Bezier :
      • Description : Ce site est dédié à la personnalisation des courbes de Bézier pour les transitions CSS. Les courbes de Bézier contrôlent la vitesse d’une animation et peuvent être ajustées pour créer des effets uniques.
      • Utilisation : Jouez avec les courbes dans l’éditeur graphique pour voir l’effet sur les animations. Le code de la courbe peut être copié et utilisé dans vos propriétés de transition CSS.

Conclusions

Les animations et transitions CSS sont des outils puissants pour améliorer l’expérience utilisateur sur les sites web modernes. Dans ce guide, nous avons exploré les bases et les techniques avancées pour créer des animations et transitions fluides et réactives, tout en mettant l’accent sur l’avantage significatif de ne pas dépendre de JavaScript.

Points Clés à Retenir :

  1. Utilisation Facile et Efficace : Les animations et transitions CSS sont simples à implémenter et offrent une fluidité et une légèreté que le JavaScript peine parfois à égaler.
  2. Performance Optimisée : En utilisant CSS pour les animations, on réduit le poids des scripts JavaScript, ce qui contribue à de meilleures performances et à une expérience utilisateur plus rapide.
  3. Accessibilité et Compatibilité : Les animations CSS garantissent une meilleure accessibilité et sont largement compatibles avec les navigateurs modernes.
  4. Créativité et Flexibilité : Avec les keyframes et les transitions multi-étapes, CSS offre une vaste gamme de possibilités créatives pour animer des éléments de manière élégante et interactive.

J’encourage les développeurs et les designers web à expérimenter avec les animations CSS, à explorer les nombreuses ressources disponibles, et à continuer à apprendre pour rester à la pointe des tendances actuelles en matière de design web. L’innovation dans l’utilisation des animations et transitions CSS peut transformer de manière significative l’expérience utilisateur et différencier votre site web dans le paysage numérique compétitif d’aujourd’hui.

Voir aussi : Comment créer un menu déroulant en utilisant uniquement du css.

Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Content is protected !!
BOOGLIT
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0