On ignore souvent la puissance de CSS, notamment en ce qui concerne les animations.
Ce cours en vidéo vous propose de d'abord de découvrir ou mettre à jour vos connaissances sur les pseudos-classes, les propriétés, les transitions etc...
Puis, de mettre directement ce que vous avez appris en application en codant 9 projets d'animations en CSS.
Au programme de ce tuto les animations CSS en 9 projets
La première partie de cette formation en ligne sera consacrée aux bases théoriques de l'animation CSS. Nous verrons :
- Les pseudo-classes
- Les pseudo-éléments
- Before et After
- Propriétés
- Transitions
- Animations
Puis, la seconde partie est consacrée à la réalisation de 9 projets d'animation en CSS : projet Checkbox stylisée, animation de SVG, carte tournante, oader avec filter, blur & contrast, Overlay, un Menu rideau, le Before et After, le Clip Path, un Menu checkbox et l'animation d'un icône hamburger.
A la fin de cette formation, vous serez autonome sur la création d'animation en CSS.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Bon tuto !
PS : pour aller plus loin, je propose également une formation sur l'animation en Javascript.
Table des matières de cette formation CSS (durée : 2h24m)
-
Introduction
- Introduction 00:01:50
- Mise en place et explication 00:01:25
-
Cours animation CSS
- Les Pseudo-classes 00:07:19
- Before et after 00:06:30
- Propriétés 00:07:27
- Transition 00:08:18
- Animation 00:09:56
-
Projet 1 checkbox
- Projet 1 00:09:52
-
Projet 2 : Animation SVG
- Projet 2 00:12:02
-
Projet 3 : Carte tournante
- Projet 3 00:10:34
-
Projet 4 : Animation 4 points
- Projet 4 00:10:15
-
Projet 5 : Overlay
- Projet 5 00:12:28
-
Projet 6 : Menu Rideau
- Projet 6 00:09:13
-
Projet 7 : Before & After
- Projet 7 00:06:23
-
Projet 8 : Clip Path
- Projet 8 00:09:43
-
Projet 9 : Menu Checkbox + Anim
- Projet 9 partie 1 00:12:51
- Projet 9 partie 2 00:08:34
- Fichiers sourcestélécharger
- Certificat
Formateur : Enzo Ustariz
-
Simple et bien expliqué. merci Enzo.
-
Merci Enzo ! Vos cours sont d'une grande clarté et avec une logique de progression qui est parfaite ! Je ne pensais pas que les CSS pouvait gérer autant d'effets d'animation. Un grand merci pour ce pas de géant que je viens de faire grâce à votre tuto.
-
Bravo... je ne me lasse pas de suivre ces tutos! Trop cool :)
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS 3
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Le fichier source contient le code source de la partie cours et de tous les projets.
note moyenne
avis laissés