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
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
Animer un Loader en CSS
JE te propose qu'on s’amuse avec les animations CSS en créant des points qui sautent !
Idéal pour un loader par exemple !
Au besoin, mon code : saute vers le code !
Et mieux encore, la vidéo pour coder avec moi :
🛠️ Explication rapide
L’animation est super simple :
✅ Un point qui saute avec @keyframes
✅ Un décalage temporel pour un effet fluide
✅ Changement de couleur à chaque étape
📌 Principe de l’animation
🔹 Le point monte, change de couleur, descend, rechute
🔹 Chaque point a un décalage dans le temps pour un effet ondulatoire
🔹 On boucle l’animation pour un mouvement infini
💡 Astuce : Joue avec les couleurs, la hauteur du saut et le timing pour voir l’effet que ça donne !
🚀 À toi de jouer !
Teste, modifie, personnalise... c’est fait pour ça !
Allez, je te laisse coder et on se retrouve dans la prochaine vidéo. 😉
Écrit en 03/25 par Christophe C.
Mis à jour en 03/25