animation-timing-function

Imagine comment les anciens Égyptiens transportaient d'énormes blocs de pierre pour construire les pyramides. Certains blocs glissaient à une vitesse constante et régulière sur des rails en bois - c'est l'équivalent de linear. D'autres démarraient lentement, le temps que les ouvriers prennent de l'élan, puis accéléraient - c'est ease-in. D'autres encore filaient au départ mais ralentissaient lors du positionnement précis - c'est ease-out.

La propriété animation-timing-function en CSS permet exactement ce type de contrôle sur le rythme de l'animation, en définissant comment les valeurs intermédiaires sont calculées au cours de l'animation. Cela te permet de créer différents effets, comme l'accélération, la décélération ou des courbes de transition personnalisées.

Fonctions de timing prédéfinies

Il existe de nombreuses valeurs prédéfinies pour animation-timing-function qui peuvent être utilisées pour obtenir différents effets.

Linear

L'animation a un rythme constant du début à la fin.

1.animation-linear {
2  animation-timing-function: linear;
3}

Ease

L'animation démarre lentement, accélère au milieu, puis ralentit à la fin.

1.animation-ease {
2  animation-timing-function: ease;
3}

Ease-in

L'animation démarre lentement puis accélère.

1.animation-ease-in {
2  animation-timing-function: ease-in;
3}

Ease-out

L'animation démarre vite puis ralentit.

1.animation-ease-out {
2  animation-timing-function: ease-out;
3}

Ease-in-out

L'animation démarre lentement, accélère au milieu, puis ralentit de nouveau.

1.animation-ease-in-out {
2  animation-timing-function: ease-in-out;
3}

Courbes de Bézier personnalisées

Pour des effets plus avancés, tu peux définir ta propre courbe de Bézier à l'aide de la fonction cubic-bezier.

1.animation-custom {
2  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
3}

Ces quatre valeurs représentent les paramètres de la courbe de Bézier qui contrôlent la forme de la fonction de transition.

Exemples d'animations utilisant animation-timing-function

Exemple 1 : animation à rythme constant (Linear)

1@keyframes slide {
2  0% { left: 0; }
3  100% { left: 100px; }
4}
5
6.linear-animation {
7  position: relative;
8  animation: slide 2s linear infinite;
9}

Exemple 2 : animation avec courbe Ease

1@keyframes ease-slide {
2  0% { left: 0; }
3  100% { left: 100px; }
4}
5
6.ease-animation {
7  position: relative;
8  animation: ease-slide 2s ease infinite;
9}

Exemple 3 : courbe de Bézier personnalisée

1@keyframes custom-slide {
2  0% { left: 0; }
3  100% { left: 100px; }
4}
5
6.custom-animation {
7  position: relative;
8  animation: custom-slide 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
9}

HTML pour les exemples

Pour tester ces animations, crée un fichier HTML et ajoute les éléments appropriés avec les classes attribuées :

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Animations CSS</title>
7  <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10  <div class="linear-animation">Animation Linear</div>
11  <div class="ease-animation">Animation Ease</div>
12  <div class="custom-animation">Animation Bézier personnalisée</div>
13</body>
14</html>

Tâche : créer une animation utilisant différentes fonctions de timing

Ta tâche consiste à créer une animation pour trois éléments différents. Chaque élément doit utiliser une animation-timing-function différente :

1. Animation Linear : l'élément doit se déplacer horizontalement à un rythme constant.
2. Animation Ease-in-out : l'élément doit se déplacer horizontalement, en démarrant lentement, en accélérant au milieu et en ralentissant à la fin.
3. Animation avec courbe de Bézier personnalisée : l'élément doit se déplacer horizontalement à l'aide d'une courbe de Bézier personnalisée.

Étapes à réaliser :

1. Crée un fichier HTML et ajoute trois éléments qui seront animés.
2. Définis des @keyframes pour une animation qui déplace les éléments horizontalement.
3. Applique les propriétés animation-timing-function appropriées à chaque élément.
4. Ajoute les styles dans un fichier CSS et charge-le dans le fichier HTML.

Exemple :

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Animations CSS</title>
7  <style>
8    @keyframes slide {
9      0% { left: 0; }
10      100% { left: 100px; }
11    }
12
13    .animation-container {
14      position: relative;
15      width: 100px;
16      height: 50px;
17      margin: 20px;
18      background-color: lightblue;
19    }
20
21    .linear-animation {
22      animation: slide 2s linear infinite;
23    }
24
25    .ease-in-out-animation {
26      animation: slide 2s ease-in-out infinite;
27    }
28
29    .custom-animation {
30      animation: slide 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
31    }
32  </style>
33</head>
34<body>
35  <div class="animation-container linear-animation">Linear</div>
36  <div class="animation-container ease-in-out-animation">Ease-in-out</div>
37  <div class="animation-container custom-animation">Custom</div>
38</body>
39</html>

Grâce à la propriété animation-timing-function, tu as un contrôle total sur le rythme de l'animation, ce qui te permet de créer des effets visuels plus avancés et intéressants sur les pages web.

« Comme dit Mohamed : le tempo d'une animation, c'est comme le tempo de la construction d'une pyramide - trop rapide et tout s'effondre, trop lent et personne ne verra le résultat. Trouve l'équilibre parfait avec animation-timing-function ! »

Essaie différentes fonctions de timing dans l'éditeur ci-dessous :

1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7body {
8  font-family: 'Segoe UI', sans-serif;
9  background: linear-gradient(180deg, #1a0a2e, #2d1b4e);
10  color: white;
11  min-height: 100vh;
12  display: flex;
13  justify-content: center;
14  align-items: center;
15}
16
17.scene {
18  text-align: center;
19  width: 100%;
20  max-width: 600px;
21  padding: 20px;
22}
23
24h2 {
25  margin-bottom: 30px;
26  color: #f0c040;
27}
28
29.river {
30  background: linear-gradient(180deg, #1565c0, #0d47a1);
31  height: 120px;
32  border-radius: 10px;
33  display: flex;
34  align-items: center;
35  overflow: hidden;
36  position: relative;
37}
38
39.boat {
40  font-size: 24px;
41  background: #8d6e2e;
42  color: white;
43  padding: 10px 20px;
44  border-radius: 8px;
45  position: relative;
46  white-space: nowrap;
47  /* Ajoute l'animation ici */
48  /* Utilise @keyframes sail avec translateX */
49  /* animation: sail 8s linear infinite alternate; */
50}
51
52/* Définis @keyframes sail */
53/* 0% { transform: translateX(-100px); } */
54/* 100% { transform: translateX(400px); } */
55
56.hint {
57  margin-top: 20px;
58  color: #aaa;
59  font-style: italic;
60}