Maîtrisez les animations CSS avancées (scroll, view, timeline)
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
1h50
de formation
22
leçons vidéo
2
chapitres
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

Maîtrisez les animations CSS avancées (scroll, view, timeline)

4.8/5 Trustpilot (1392 avis) Satisfait ou remboursé
1h50
de formation
22
leçons vidéo
2
chapitres

Apprenez à maîtriser les animations avancées en CSS avec cette formation complète et moderne !
Dans ce tutoriel en deux parties, vous découvrirez d’abord les fondements théoriques des animations CSS basées sur les propriétés animation-timeline, scroll() et view(), avec des cas d’usage concrets et des démonstrations dynamiques.
Ensuite, place à la mise en pratique à travers un projet complet de site web animé.
De la structure HTML à l'intégration responsive, chaque section est travaillée et animée avec des effets fluides, accessibles et visuellement percutants.

Objectifs :

  • Comprendre et exploiter les nouvelles propriétés CSS d’animation conditionnelle (scroll, view)
  • Créer des animations déclenchées au scroll ou à l’entrée dans le viewport
  • Réaliser un site responsive avec des effets visuels modernes et fluides
  • Optimiser la lisibilité et l’impact de vos contenus grâce aux animations

Plan de cette formation animations CSS avancées

  • 6 vidéos de cours pour comprendre les concepts (timelines, ranges, conditions)
  • 16 vidéos d'application pour construire et animer un projet de A à Z

Public visé : développeurs frontend, étudiants, designers web ou toute personne souhaitant faire passer ses interfaces au niveau supérieur !
👉 Formation 100% en ligne, complète et à jour des dernières spécifications CSS.

Pour aller plus loin :

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Cours
Chapitre 2
Application

Table des matières

Chapitre 1 : Cours

33m14
 
Leçon 1Découvrir les animations avancées du CSS
Leçon 2Vérification avec Can I use
Leçon 3Début et fin de l'animation
Leçon 4Les différentes valeurs de la timeline
Leçon 5Les différentes valeurs du début et fin de l'animation
Leçon 6Instructions conditionnelles

Chapitre 2 : Application

1h16
 
Leçon 1Mise en place des bases de la structure HTML
Leçon 2Mise en place du Header
Leçon 3Mise en place de la Section1
Leçon 4Positionner les éléments de la Section1
Leçon 5Mise en forme de la Section1 pour les petits écrans
Leçon 6Animer les images du Header
Leçon 7Mise en place de la Section2
Leçon 8Animer la Section1
Leçon 9Animer l'image de la Section2
Leçon 10Animer le H2 de la Section2
Leçon 11Mise en place de la Section3
Leçon 12Animer la Section3
Leçon 13Mise en place de la Section4
Leçon 14Animer la Section4
Leçon 15Mise en place du Footer
Leçon 16Animer le Footer

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Le code source de l'exercice d'application

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
19,95€
Paiement unique, sans abonnement
Accès à vie à cette formation
1h50 de vidéo • 2 chapitres
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 784 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données