# 21 Transitions & Animations

## [#](#transitions) Transitions

Avec la pseudo-classe `:hover` vous pouvez décrire ce qui devrait arriver à un élément HTML lorsque vous le survolez. Le bouton suivant permet de changer la couleur de fond.

```html
    <a class="button" href="https://duckduckgo.com">
      Je suis un bouton
    </a>
```

```css
    .button {
      background-color: royalblue;
      color: white;
      border-radius: 0.5rem;
    }
    
    .button:hover {
      background-color: orange;
    }
```

:hammer\_pick: tester ce code

Vous pouvez voir que le changement est instantané et qu'il n'y a pas de délai entre le changement de la couleur de fond. Avec la propriété "transition", vous pouvez animer entre les propriétés. Cela se fait en définissant ce qui suit sur la classe originale ".button" :

```css
    .button {
        background-color: royalblue;
        color: white;
        border-radius: 0.5rem;
        transition-property: background-color;
        transition-duration: 1s;
        transition-timing-function: linear;
    }
    
    .button:hover {
        background-color: orange;
    }
```

:hammer\_pick: tester ce code

Vous pouvez également animer plusieurs propriétés indépendamment. Vous devez veiller à séparer les valeurs par une virgule et à respecter le bon ordre. Si vous voulez animer toutes les propriétés, vous pouvez écrire `transition-property: all`.

```css
.button {
background-color: royalblue;
color: white;
border-radius: 0.5rem;
transition-property: background-color, color;
transition-duration: 1s, 0.5s;
transition-timing-function: linear;
}

.button:hover {
background-color: orange;
color: black;
}
```

## [#](#animations) Animations

Les animations ne nécessitent aucune interaction, comme un ".hover" avec le curseur, par rapport aux transitions. Avec les animations, vous décrivez un ensemble de propriétés qui doivent être animées vers un autre ensemble de propriétés. Vous pouvez considérer cela comme une transition. Chaque étape est appelée "keyframe" en CSS. Dans votre sélecteur, vous faites alors référence au nom de l'animation de vos "images-clés" et vous indiquez à ce sélecteur comment jouer l'animation.

Dans l'exemple suivant, nous voulons qu'un carré soit pulsé et que la couleur passe de "bleu royal" à "orange".

```css
    /* On définit d'abord l'animation... */

@keyframes carrePulse {
0% { /* Début */
transform: scale(0.7); /* 70% de la taille d'origine */
background-color: royalblue;
}
100% { /* Fin */
transform: scale(1);
background-color: orange;
}
}
    
    /* ...alors l'animation est assignée. */

.square {
height: 5rem;
width: 5rem;
animation-name: carrePulse;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
```

```html
    <div class="square"></div>
```

La propriété "animation-timing-function: ease-in-out;" donne l'impression que le carré "respire", car l'animation joue à des vitesses différentes. Une animation toujours stable pourrait être obtenue avec la valeur "linéaire". Grâce à ces fonctions de chronométrage, vous pouvez donner aux animations un aspect réaliste. Dans les liens ci-dessous, vous trouverez des fiches de référence à partir desquelles vous pouvez copier des valeurs pour vous familiariser avec les fonctions de temps.

Pour faire jouer l'animation à l'infini, il faut définir "animation-iteration-count: infinite;". Si vous voulez que l'animation ne soit jouée que 3 fois, alors écrivez `animation-iteration-count: 3;`.

Avec `animation-direction: alternate`, vous définissez que l'état final (`100%`) s'anime à nouveau pour revenir à l'état initial (`0%`). Sinon, l'animation reviendrait à l'état initial après avoir atteint l'état final. Dans notre exemple, le carré deviendrait soudainement plus petit et changerait de couleur.

:link: Liens

* [Fiche de référence](https://easings.net) (easings.net)
* [Animista - Exemples avec aperçu et code](https://animista.net/)

Relever les défis

[#20 CSS Animations](https://github.com/inetis-ch/viscom-cie1/blob/main/viscom-cie1/challenges/README.md#_20-css-animations) (Ajouter une animation avec CSS qui ne s'arrête jamais et fonctionne indépendamment de l'interaction de l'utilisateur)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cmspilot.gitbook.io/viscom-cie1/21.transitions_animations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.