Articles
Introduction au CSS
Propriétés CSS liées à l'animation

Propriétés CSS liées à l'animation

Cet article explique les propriétés CSS liées aux animations.

Vous pouvez apprendre l'utilisation et la syntaxe des propriétés @keyframes, animation et transition.

YouTube Video

HTML pour l'aperçu

css-animation.html 
 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>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-animation.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Animation</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Animation Related Properties</h2>
20        </header>
21        <article>
22            <h3>@keyframes</h3>
23            <section>
24                <h4>Animation Examples</h4>
25                <header><h4>animation: slide 3s ease infinite</h4></header>
26                <section class="sample-view">
27                    <div class="box-animation-slide">Slide Box</div>
28                </section>
29                <header><h4>animation: color-change 3s ease infinite</h4></header>
30                <section class="sample-view">
31                    <div class="box-animation-color-change">Color Change Box</div>
32                </section>
33                <header><h4>animation: fade 3s ease infinite</h4></header>
34                <section class="sample-view">
35                    <div class="box-animation-fade">Fade Box</div>
36                </section>
37            </section>
38        </article>
39        <article>
40            <h3>animation</h3>
41            <section>
42                <h4>Animation Examples</h4>
43                <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44                <section class="sample-view">
45                    <div class="box-animation-ease-in-out">Slide Box</div>
46                </section>
47                <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48                <section class="sample-view">
49                    <div class="box-animation-alternate">Color Change Box</div>
50                </section>
51            </section>
52        </article>
53        <article>
54            <h3>transition</h3>
55            <section>
56                <h4>Transition Examples</h4>
57                <header><h4>transition: background-color 2s ease</h4></header>
58                <section class="sample-view">
59                    <div class="transition-box">Hover me!</div>
60                </section>
61                <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62                <section class="sample-view">
63                    <div class="transition-2-properties">Hover me!</div>
64                </section>
65            </section>
66        </article>
67    </main>
68</body>
69</html>

Animation & Transition

Règle @keyframes 

 1/* Animation definition */
 2@keyframes slide {
 3    0% {
 4        transform: translateX(0);
 5    }
 6    50% {
 7        transform: translateX(200px);
 8    }
 9    100% {
10        transform: translateX(0);
11    }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16    width: 100px;
17    height: 100px;
18    background-color: skyblue;
19    animation: slide 3s ease infinite;
20}

@keyframes est utilisé dans les animations CSS pour spécifier comment les styles changent au cours de l'animation. Dans @keyframes, les changements de style du début à la fin de l'animation sont spécifiés par des pourcentages de temps ou des mots-clés (from et to).

  • Voici un exemple d'animation où un élément glisse de gauche à droite et revient à sa position d'origine.
  • Dans cet exemple, slide est écrit après @keyframes, définissant une animation nommée slide.
  • 0% est le début de l'animation, avec translateX(0) positionnant l'élément à son emplacement d'origine.
  • 50% correspond au milieu de l'animation, où l'élément se déplace de 200px vers la droite grâce à translateX(200px).
  • 100% est la fin de l'animation, où l'élément revient à sa position initiale.
  • Dans la classe box-animation-slide, la propriété animation est utilisée pour appliquer l'animation slide à intervalles de 3 secondes.
 1@keyframes color-change {
 2    0% {
 3        background-color: red;
 4    }
 5    25% {
 6        background-color: blue;
 7    }
 8    50% {
 9        background-color: green;
10    }
11    75% {
12        background-color: yellow;
13    }
14    100% {
15        background-color: red;
16    }
17}
18
19.box-animation-color-change {
20    width: 100px;
21    height: 100px;
22    background-color: skyblue;
23    animation: color-change 3s ease infinite;
24}
  • Vous pouvez contrôler avec précision les styles au cours d'une animation. En spécifiant des pourcentages, vous pouvez appliquer différents styles à des moments arbitraires.
    • Dans cet exemple, la couleur change progressivement du rouge au bleu, au vert, au jaune, puis revient au rouge.
 1@keyframes fade {
 2    from {
 3        opacity: 0;
 4    }
 5    to {
 6        opacity: 1;
 7    }
 8}
 9
10.box-animation-fade {
11    width: 100px;
12    height: 100px;
13    background-color: blue;
14    animation: fade 3s ease infinite;
15}
  • Dans cet exemple, from équivaut à 0% et to équivaut à 100%. Cela vous permet de définir des animations simples.

Syntaxe de base 

 1@keyframes animation-name {
 2    0% {
 3        /* Style at the start */
 4    }
 5    50% {
 6        /* Style at the midpoint */
 7    }
 8    100% {
 9        /* Style at the end */
10    }
11}
  • animation-name : Le nom de l'animation. Ceci est spécifié à l'aide de la propriété animation ou de la propriété animation-name.
  • Pourcentages ou mots-clés : Utilisez des pourcentages de 0% à 100%, ou les mots-clés from (équivalent à 0%) et to (équivalent à 100%).

Propriété animation 

1.box-animation-ease-in-out {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: slide 3s ease-in-out infinite;
6}

La propriété animation est utilisée pour appliquer des animations à un élément. Les animations définissent comment un ensemble de styles CSS évolue au fil du temps. Avec la propriété animation, vous pouvez contrôler le timing, le comportement, le délai, le nombre de répétitions, et bien plus encore d'une animation.

  • La classe box-animation-ease-in-out spécifie slide comme animation-name et utilise l'animation slide définie dans @keyframes.
    • 3s est la durée de l'animation (animation-duration), ce qui signifie que chaque cycle d'animation est complété en 3 secondes.
    • ease-in-out est la fonction de synchronisation de l'animation (animation-timing-function), ce qui fait que l'animation commence lentement, accélère, puis ralentit à nouveau à la fin.
    • infinite est le nombre de répétitions de l'animation (animation-iteration-count), ce qui signifie que l'animation se reproduira indéfiniment.
1.box-animation-alternate {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: color-change 3s ease-in-out 1s 3 alternate;
6}
  • La classe box-animation-alternate spécifie color-change comme animation-name et utilise l'animation color-change définie dans @keyframes.
    • 1s, qui suit ease-in-out, est le délai d'animation (animation-delay), indiquant le délai avant le début de l'animation. L'animation commencera 1 seconde plus tard.
    • 3, qui suit 1s, est le nombre de répétitions de l'animation (animation-iteration-count), ce qui signifie que l'animation se répète 3 fois.
    • alternate est la direction de l'animation (animation-direction), spécifiant la direction de lecture de l'animation. alternate spécifie que l'animation se joue de manière alternée.

Composition de la propriété animation

La propriété animation est une propriété raccourcie qui combine plusieurs sous-propriétés en une seule. Voici les principales sous-propriétés :.

  • Propriété animation-name : spécifie le nom de l'animation à appliquer. Elle doit correspondre au nom de l'animation définie dans @keyframes.
  • Propriété animation-duration : spécifie le temps nécessaire pour que l'animation complète un cycle. Les unités de temps sont les secondes (s) ou les millisecondes (ms).
  • Propriété animation-timing-function : spécifie la courbe de vitesse de l'animation. Des valeurs telles que ease, linear, ease-in, ease-out, ease-in-out, etc. sont utilisées.
    • Spécifier ease fait commencer lentement l'animation, puis elle accélère avant de ralentir à nouveau à la fin.
    • Spécifier linear fait progresser l'animation à une vitesse constante du début à la fin.
    • Indiquer ease-in commence l'animation lentement et la termine rapidement.
    • Indiquer ease-out commence l'animation rapidement et la termine lentement.
    • Indiquer ease-in-out commence lentement, progresse rapidement et se termine lentement.
  • La propriété animation-delay spécifie le délai avant que l'animation ne commence. L'unité de temps est soit la seconde, soit la milliseconde.
  • La propriété animation-iteration-count spécifie le nombre de fois que l'animation doit se répéter. Indiquer infinite répétera l'animation indéfiniment.
  • La propriété animation-direction spécifie la direction de la lecture de l'animation. Les options incluent normal (direction normale), reverse (en arrière), alternate (lecture alternée) et alternate-reverse (lecture alternée en commençant par l'arrière).
  • La propriété animation-fill-mode spécifie l'état de l'animation avant qu'elle ne commence et après qu'elle se termine. Vous pouvez spécifier none, forwards, backwards ou both.
  • La propriété animation-play-state spécifie si l'animation est en cours d'exécution ou en pause. Vous pouvez spécifier running ou paused.

Résumé

La propriété animation est un outil puissant pour modifier dynamiquement le style des éléments. En utilisant @keyframes, vous pouvez définir comment les styles changent au fil du temps et contrôler le comportement détaillé de l'animation avec chaque sous-propriété de animation.

Propriété transition 

 1.transition-box {
 2    background-color: lightgray;
 3    transition: background-color 2s ease;
 4}
 5
 6.transition-box:hover {
 7    background-color: steelblue;
 8}
 9
10.transition-2-properties {
11    background-color: lightgray;
12    width: 150px;
13    height: 50px;
14    transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18    background-color: blue;
19    width: 250px;
20}

La propriété transition est utilisée pour appliquer des effets d'animation aux modifications de style CSS. Elle permet aux changements d'apparaître de manière fluide durant des changements d'état comme hover, focus, active, ou lorsque les styles sont modifiés dynamiquement par JavaScript.

Voyons un exemple de la classe transition-box où la couleur d'arrière-plan change en douceur lors du survol d'un bouton. - Dans la classe transition-box, la propriété transition applique une transition de 2 secondes au changement de couleur d'arrière-plan. Le changement est spécifié comme ease, le rendant fluide. - La pseudo-classe hover change la couleur d'arrière-plan de lightgray à steelblue lorsque la souris survole le bouton. Ce changement s'effectue en douceur sur les 2 secondes spécifiées dans la classe transition-box.

Il est possible d'appliquer transition à plusieurs propriétés simultanément. - Dans l'exemple de la classe transition-2-properties, la couleur d'arrière-plan change en 5 secondes et la largeur change en 0,5 seconde.

Syntaxe de base 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • La propriété property spécifie à quelles propriétés CSS l'animation doit être appliquée. Spécifier all applique l'animation à toutes les propriétés.
  • La propriété duration spécifie le temps nécessaire pour que l'animation soit terminée. Spécifiez en secondes (s) ou en millisecondes (ms).
  • La propriété timing-function spécifie les variations de vitesse de l'animation. Vous pouvez utiliser des options comme ease, linear, ease-in, ease-out, ease-in-out, etc.
  • La propriété delay spécifie le temps d'attente avant le démarrage de l'animation. Spécifiez en secondes ou en millisecondes.

Propriétés détaillées de transition 

1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;

La propriété transition peut également être utilisée sous forme de propriétés individuelles comme suit.

  • transition-property : Spécifie la propriété à laquelle l'animation est appliquée.
  • transition-duration : Spécifie la durée nécessaire à l'animation pour se terminer.
  • transition-timing-function : Spécifie la vitesse de progression de l'animation. Des options comme ease, linear, ease-in, ease-out, ease-in-out peuvent être utilisées.
  • transition-delay : Spécifie le temps d'attente avant le démarrage de l'animation.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Propriétés CSS Liées aux Effets de Filtre