Compagnon de code

CSS : l'essentiel, avec style !

Leçons :

Découverte & Sélecteurs

18:11

Styliser les textes

18:47

Comprendre les couleurs

14:11

Les backgrounds Color

10:49

Les modèles de boîtes

25:10

Notion de Clamp, le min et le max

09:12

Arrondis et Hover

14:57

Les Display

09:21

Invisibilité & Morale

08:57

Transformer des éléments ?

15:29

Les Positions

24:18

Positions & Précautions

08:11

MEP : Les positions

22:37

Les bases de Flexbox

36:54

MEP : un dé en flexbox

27:06

MEP : des cartes flexibles

19:08

Les animations en CSS

21:03

MEP : un système solaire animé

27:00

MEP : Un texte qui défile ?

09:12

MEP : un loader... des points sauteurs !

07:38

Sélectionner un enfant

07:04

Les variables CSS

15:42

Responsivité et Media Queries

19:36

Enoncé Exercice Twitter

05:15

Un clone de Twitter

54:11

Un site complet et Responsive en HTML / CSS

02:12:46

Notice

=> leçons

=> express

=> exercices

=> projets

Les animations en CSS

 

 

Bienvenue dans un monde fun et créatif : les animations CSS ! 

 Elles permettent de donner vie à nos pages web avec des effets de mouvement fluides et dynamiques.

Mais attention, c'est aussi un vrai piège : on peut y passer des heures à tester des animations plus fun les unes que les autres !

Dans cet article, on va voir les bases des animations CSS avec quelques exemples simples et efficaces à adapter sur tes futurs projets.

 

 

 

 

Comprendre les animations CSS

 

 

1. Définir une animation

 

Une animation en CSS repose sur deux éléments clés :

  • Une propriété animation pour l’appliquer sur un élément.

  • Une règle @keyframes pour définir les étapes de l’animation.

  •  

Exemple simple : une boîte qui tourne sur elle-même :

 

.box1{
  animation: rotate 4s ease-in-out infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

 

 

2. Ajouter un délai avant l’animation

 

On peut retarder le début d'une animation avec animation-delay.

.box2{
  animation: come 2s ease-in-out 2s;
}

 

 

3. Créer une animation plus complexe et fluide

 

On peut définir plusieurs étapes avec @keyframes pour un mouvement plus naturel.

@keyframes many{
  0% { transform: translateX(-60vw) scale(0.25); opacity: 0; }
  20% { transform: translateX(0) scale(1.2); opacity: 1; }
  60% { transform: translateX(60vw) scale(0.5) rotate(360deg); }
  100% { transform: translateX(0) scale(0); opacity: 1; }
}

 

 

4. Gérer la fin de l’animation

 

Par défaut, un élément reprend son état initial après l'animation. Pour éviter cela, on utilise animation-fill-mode: forwards afin qu'il conserve son état final.

.box4{
  animation: smooth 4s linear forwards;
}
 
 

Astuce pour progresser

 

Si tu veux explorer encore plus d'animations et t'inspirer,

Animista est un excellent outil qui te génère directement le CSS dont tu as besoin.

Utiliser ces outils ne signifie pas que tu codes moins, mais que tu développes plus efficacement. 😉

 

 

Conclusion

 

Les animations CSS, c’est fun et puissant, mais il faut savoir doser !

Expérimente, teste différentes valeurs et amuse-toi 

pour donner du dynamisme à tes projets web.

 

À toi de jouer ! 🚀

 

 

 

Écrit en 03/25 par Christophe C.

Mis à jour en 03/25

Commentaires

Ajoutez un commentaire