CSS
Des animations

Syntaxe

• transition: <property> <duration> <timing-function> <delay>;
• @keyframes <identifier>
• [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*

Paramètres

Animations avec la propriété de transition

Utile pour les animations simples, la propriété de transition CSS permet aux propriétés CSS basées sur les nombres de s'animer entre les états.

Exemple

.Example{
    height: 100px;
    background: #fff;
}

.Example:hover{
    height: 120px;
    background: #ff0000;
}

Voir résultat

Par défaut, si vous .Example un élément avec la classe .Example la hauteur de l'élément passe immédiatement à 120px et sa couleur d'arrière-plan 120px rouge ( #ff0000 ).

En ajoutant la propriété de transition , nous pouvons provoquer ces modifications au fil du temps:

.Example{
    ...
    transition: all 400ms ease;
}

Voir résultat

La valeur all applique la transition à toutes les propriétés compatibles (basées sur les nombres). Tout nom de propriété compatible (tel que height ou top ) peut être substitué à ce mot-clé.

400ms spécifie la durée de la transition. Dans ce cas, le changement de hauteur de l'élément prendra 400 millisecondes.

Enfin, la valeur ease est la fonction d'animation, qui détermine la manière dont l'animation est jouée. ease signifie commencer lentement, accélérer, puis terminer à nouveau lentement. Les autres valeurs sont linear , ease-out et ease-in .

Compatibilité entre navigateurs

La propriété de transition est généralement bien prise en charge sur tous les principaux navigateurs, à l'exception d'IE 9. Pour les versions antérieures des navigateurs basés sur Firefox et Webkit, utilisez les préfixes du fournisseur comme suit:

.Example{
    transition:         all 400ms ease;
    -moz-transition:    all 400ms ease;
    -webkit-transition: all 400ms ease;
}

Remarque: La propriété de transition peut animer les modifications entre deux valeurs numériques, indépendamment de l'unité. Il peut également faire la transition entre les unités, telles que 100px à 50vh . Cependant, il ne peut pas faire la transition entre un nombre et une valeur par défaut ou automatique, telle que la transition d'une hauteur d'élément de 100px à auto .

Augmentation des performances d'animation à l'aide de l'attribut `will-change`

Lors de la création d'animations et d'autres actions lourdes de GPU, il est important de comprendre l'attribut will-change .

Les images clés CSS et la propriété de transition utilisent l'accélération GPU. Les performances sont augmentées par le déchargement des calculs sur le GPU du périphérique. Cela se fait en créant des couches de peinture (parties de la page qui sont rendues individuellement) qui sont déchargées sur le GPU pour être calculées. La propriété will-change indique au navigateur ce qui va animer, permettant au navigateur de créer des zones de peinture plus petites, augmentant ainsi les performances.

La propriété will-change accepte une liste de propriétés séparées par des virgules à animer. Par exemple, si vous envisagez de transformer un objet et de modifier son opacité, vous devez spécifier:

.Example{
    ...
    will-change: transform, opacity;
}

Remarque: Utilisez will-change avec modération. La définition de will-change pour chaque élément d'une page peut entraîner des problèmes de performances, car le navigateur peut tenter de créer des couches de peinture pour chaque élément, ce qui augmente considérablement la quantité de traitement effectuée par le GPU.

Animations avec images clés

Pour les animations CSS multi-étapes, vous pouvez créer CSS @keyframes . Les images clés vous permettent de définir plusieurs points d'animation, appelés images clés, pour définir des animations plus complexes.

Exemple de base

Dans cet exemple, nous allons créer une animation d'arrière-plan de base qui passe de toutes les couleurs.

@keyframes rainbow-background {
         0%     { background-color: #ff0000; }
     8.333%     { background-color: #ff8000; }
    16.667%     { background-color: #ffff00; }
    25.000%     { background-color: #80ff00; }
    33.333%     { background-color: #00ff00; }
    41.667%     { background-color: #00ff80; }
    50.000%     { background-color: #00ffff; }
    58.333%     { background-color: #0080ff; }
    66.667%     { background-color: #0000ff; }
    75.000%     { background-color: #8000ff; }
    83.333%     { background-color: #ff00ff; }
    91.667%     { background-color: #ff0080; }
    100.00%     { background-color: #ff0000; }
}

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

Voir résultat

Il y a plusieurs choses à noter ici. Tout d'abord, la syntaxe @keyframes réelle.

@keyframes rainbow-background{

Cela définit le nom de l'animation sur l' rainbow-background .

0%     { background-color: #ff0000; }

C'est la définition d'une image clé dans l'animation. La première partie, le 0% dans le cas, définit où se trouve l'image-clé pendant l'animation. Le 0% implique que c'est 0% du temps d'animation total depuis le début.

L'animation passera automatiquement entre les images clés. Ainsi, en définissant la couleur d'arrière-plan suivante à 8.333% , l'animation prendra 8,333% du temps de transition entre ces images clés.

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

Ce code joint notre animation à tous les éléments qui ont la classe .RainbowBackground .

La propriété d'animation réelle prend les arguments suivants.

• nom-animation : le nom de notre animation. Dans ce cas, rainbow-background
• animation-duration : durée de l'animation, dans ce cas 5 secondes.
• animation-iteration-count (Facultatif) : nombre de fois que l'animation sera mise en boucle. Dans ce cas, l'animation se poursuivra indéfiniment. Par défaut, l'animation sera jouée une fois.
• animation-delay (Facultatif) : Spécifie combien de temps attendre avant le début de l'animation. La valeur par défaut est 0 seconde et peut prendre des valeurs négatives. Par exemple, -2s lancerait l'animation 2 secondes dans sa boucle.
• animation-timing-function (Facultatif) : Spécifie la courbe de vitesse de l'animation. Par défaut, cela ease , où l'animation commence lentement, devient plus rapide et se termine lentement.

Dans cet exemple particulier, les images clés 0% et 100% spécifient { background-color: #ff0000; } . Partout où deux images clés ou plus partagent un état, on peut les spécifier dans une seule déclaration. Dans ce cas, les deux lignes 0% et 100% pourraient être remplacées par cette seule ligne:

0%, 100%     { background-color: #ff0000; }

Compatibilité entre navigateurs

Pour les navigateurs WebKit plus anciens, vous devez utiliser le préfixe du fournisseur dans la déclaration @keyframes et la propriété animation , comme ceci:

@-webkit-keyframes{}

-webkit-animation: ...

Exemples de syntaxe

Notre premier exemple de syntaxe montre la propriété abrégée d'animation en utilisant toutes les propriétés / paramètres disponibles:

  animation: 3s         ease-in           1s      2                 reverse     both        paused       slidein;
  /*         duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name   */

Notre deuxième exemple est un peu plus simple et montre que certaines propriétés peuvent être omises:

  animation: 3s         linear            1s      slidein;
  /*         duration | timing-function | delay | name   */

Notre troisième exemple montre la déclaration la plus minimale. Notez que le nom de l'animation et la durée de l'animation doivent être déclarés:

  animation: 3s         slidein;
  /*         duration | name */

Il convient également de mentionner que, lorsque vous utilisez l’animation abrégée, l’ordre des propriétés fait la différence. De toute évidence, le navigateur peut confondre votre durée avec votre retard.

Si la concision n'est pas votre truc, vous pouvez également ignorer la propriété abrégée et écrire chaque propriété individuellement:

animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
animation-name: slidein;