Temps de lecture : 13 minutes environ.
Dans ce tutoriel, nous allons découvrir une propriété CSS récente et expérimentale : animation-timeline. Cette propriété permet de déclencher des animations au scroll, sans utiliser de JavaScript. Bien que cette fonctionnalité ne soit pas encore pleinement supportée par tous les navigateurs, elle offre des possibilités intéressantes pour des animations fluides et réactives.
⚠️ Note : À ce jour, animation-timeline est uniquement supportée par les navigateurs basés sur Chromium (comme Chrome et Edge) et partiellement sur Safari et Firefox. Cette fonctionnalité reste expérimentale, il est donc déconseillé de l'utiliser en production.
Objectif du tutoriel
Nous allons créer une animation où des sections apparaîtront avec un effet de translation et d'opacité lorsqu'elles entrent dans le champ de vision lors du défilement de la page. Tout cela sera réalisé uniquement avec du HTML et du CSS, sans une seule ligne de JavaScript.
Étape 1 : Préparation du fichier HTML
Commençons par un fichier HTML simple avec quelques sections à animer :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation avec animation-timeline</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div>
<p>Bonjour</p>
<p>Bienvenue</p>
<p>Cette page contient des animations au scroll</p>
</div>
</header>
<section class="container">
<!-- Six sections à animer -->
<div class="box"><h3>Boîte 1</h3><p>Lorem ipsum dolor sit amet...</p></div>
<div class="box"><h3>Boîte 2</h3><p>Lorem ipsum dolor sit amet...</p></div>
<div class="box"><h3>Boîte 3</h3><p>Lorem ipsum dolor sit amet...</p></div>
<div class="box"><h3>Boîte 4</h3><p>Lorem ipsum dolor sit amet...</p></div>
<div class="box"><h3>Boîte 5</h3><p>Lorem ipsum dolor sit amet...</p></div>
<div class="box"><h3>Boîte 6</h3><p>Lorem ipsum dolor sit amet...</p></div>
</section>
</body>
</html>Étape 2 : Création du fichier CSS
Ensuite, passons à la feuille de style CSS pour définir les animations et la mise en page.
Initialisation des styles
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
overflow-x: hidden;
}
header {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: #f0f0f0;
}
.container {
display: flex;
flex-direction: column;
gap: 50px;
padding: 20px;
}
Styles pour les sections animées
.box {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #000;
color: #fff;
padding: 30px;
text-align: center;
opacity: 0;
transform: scale(0.8) translateX(50vw);
animation: scroll-effect 5s ease-in-out forwards;
animation-timeline: view();
}
Étape 3 : Définition des animations avec keyframes
La partie la plus importante de ce tutoriel est la définition des animations. Voici comment nous allons utiliser les @keyframes pour créer un effet d'apparition fluide :
@keyframes scroll-effect {
0% {
opacity: 0;
transform: scale(0.8) translateX(50vw);
}
50% {
opacity: 1;
transform: scale(1) translateX(0);
}
100% {
opacity: 0;
transform: scale(1.2) translateX(-50vw);
}
}
Explication du code
- 0% : Les boîtes commencent à l'extérieur de l'écran à droite (
translateX(50vw)), réduites à 80% de leur taille (scale(0.8)), avec une opacité de 0. - 50% : Lorsqu'elles atteignent le centre de l'écran, elles reprennent leur taille d'origine (
scale(1)) et deviennent totalement visibles (opacity: 1). - 100% : Enfin, elles disparaissent vers la gauche (
translateX(-50vw)) avec une légère augmentation de taille (scale(1.2)).
Étape 4 : Utilisation de animation-timeline
La propriété animation-timeline que nous avons ajoutée (animation-timeline: view;) permet de déclencher l'animation uniquement lorsque l'élément entre dans le champ de vision. Ainsi, chaque boîte s'anime indépendamment, au fur et à mesure que l'utilisateur fait défiler la page.
Conclusion
Grâce à la propriété animation-timeline, nous avons pu créer des animations au scroll fluides et élégantes sans avoir recours au JavaScript. Bien que cette propriété soit encore en phase expérimentale, elle démontre un potentiel intéressant pour simplifier les animations complexes.
🔍 Astuce : Surveillez les mises à jour des navigateurs pour savoir quand cette propriété sera prise en charge plus largement. Pour l'instant, il est conseillé de tester la compatibilité avant d'utiliser animation-timeline dans un projet en production.
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.
