Développement web

Cours 06

Animations / transitions CSS

Différence entre transition et animation

La transition se fait entre un état A et un état B

L'animation peut passer par plus de deux états (appelés keyframes)

Transitions

Propriétés CSS

Il existe 4 propriétés pour faire une transition.

  • transition-property
    Propriétés CSS qui vont subir les transitions.
    Défaut : all
  • transition-duration
    Durée de la transition (s/ms)
    Défaut : 0s
  • transition-timing-function
    Vitesse de la transition au fil du temps (ease, linear, ease-in, ease-out, ease-in-out) aussi appelé easing
    Défaut : ease
  • transition-delay
    Délai avant le départ (s/ms)
    Défaut : 0s

Il est possible d'écrire ces 4 propriétés en une seule (version shorthand)

Exemple


.transition
{
    transition-property: left;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 0s;
    
    transition: left 1s ease 0s;
}
.transition:hover
{
    left: 100%;
}
                        


.transition
{
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-out;
    transition-delay: 1s;
    
    transition: all 2s ease-out 1s;
}
.transition:hover
{
    left: 100%;
    width: 200px;
    background: red;
}

Ce qu'on peut modifier

À peu près tout ce qui est quantifiable

Courbes de bézier

Créer ses propres easing

https://fr.wikipedia.org/wiki/Courbe_de_Bézier : Wikipedia

http://matthewlein.com/ceaser/ : Générateur

Ou directement dans le dev tools

Le choix de la courbe de bézier devrait se décider à l'étape de création, mais se fait en général à l'étape de développement

Exemple CSS3


.transition
{
    transition-timing-function: cubic-bezier(0.2, 1.2, 0.8, -0.2);
}
                            


.transition
{
    transition-timing-function: cubic-bezier(1, 0, 0, 1);
}

Transition / transformations

Les transitions fonctionnent particulièrement bien avec les transformations

Lorsque vous le pouvez, préférez les transformations aux autres propriétés comme left, width, etc.

Transform (translateX)

Left

Compatibilité

Étapes à suivre vis-à-vis de la compatibilité

http://caniuse.com/#feat=css-transitions

CanIUse

Animations

Comme les transitions

Mais avec des keypoints

Propriétés CSS

Il existe 8 propriétés dont les 2 suivantes sont obligatoires

  • animation-name*
    Nom des keyframes
    (explication plus tard)
  • animation-duration*
    Durée de l'animation
    (similaire aux transitions)

Il faut ensuite définir la timeline n'importe où dans le CSS avec @keyframes suivie du même nom d'animation

Chaque keyframe est définie par le pourcentage de l'animation (ex: 50% = moitié de la durée) et les propriétés à appliquer

Le nom de l'animation doit respecter les règles de nomenclature des classes CSS

  • Lowercase
  • Tirets
  • Underscores
  • Chiffres (sauf en premier caractère)

.animation
{
    animation-name: my-super-animation;
    animation-duration: 3s;

    animation: my-super-animation 3s;
}

@keyframes my-super-animation
{
    0%   { left: 0px; }
    50%  { left: 800px; }
    70%  { left: 250px; }
    100% { left: 500px; }
}
Actualiser pour voir l'animation 


.animation
{
    animation-name: my-super-animation;
    animation-duration: 3s;

    animation: my-super-animation 3s;
}

@keyframes my-super-animation
{
    0%   { left: 0px; width: 100px; }
    50%  { left: 800px; width: 50px; background: green; }
    70%  { left: 250px; width: 300px; background: red; }
    100% { left: 500px; width: 50px; }
}
Actualiser pour voir l'animation

  • animation-timing-function
    Type de transition (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier)
    (similaire aux transitions)
  • animation-delay
    Retard avant le départ (s/ms)
    (similaire aux transitions)
  • animation-iteration-count
    Combien de fois jouer l'animation (1 par défaut)
  • animation-direction
    Direction de l'animation (normal, reverse, alternate, alternate-reverse)
  • animation-play-state
    État par défaut de l'animation (running, paused)
  • animation-fill-mode
    État lorsque l'animation ne joue pas (forwards, backwards, both)     

.animation
{
    animation-name: my-super-animation;
    animation-duration: 3s;
    animation-iteration-count: 2;
}

@keyframes my-super-animation
{
    0%   { left: 0px; }
    50%  { left: 800px; }
    70%  { left: 250px; }
    100% { left: 500px; }
}
Actualiser pour voir l'animation 


.animation
{
    animation-name: my-super-animation;
    animation-duration: 3s;
    animation-direction: reverse; 
    /* normal / reverse / alternate / alternate-reverse */
}

@keyframes my-super-animation
{
    0%   { left: 0px; }
    50%  { left: 800px; }
    70%  { left: 250px; }
    100% { left: 500px; }
}
Actualiser pour voir l'animation 


.animation
{
    animation-name: my-super-animation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes my-super-animation {
    0%   { left:0px; }
    50%  { left:800px; }
    70%  { left:250px; }
    100% { left:500px; }
}
                        


.animation
{
    animation: my-super-animation 3s ease 0s infinite;
    animation-play-state: paused;
}
.container:hover .animation
{
    animation-play-state: running;
}
@keyframes my-super-animation
{
    0%   { left:0px; }
    50%  { left:800px; }
    70%  { left:250px; }
    100% { left:500px; }
}

Ce qu'on peut modifier

Cf. slide sur les transitions

Compatibilité

http://caniuse.com/#feat=css-animation

CanIUse

Avec les prefixes


.animation
{
    -webkit-animation: my-super-animation 3s;
       -moz-animation: my-super-animation 3s;
         -o-animation: my-super-animation 3s;
            animation: my-super-animation 3s;
}
        
@-webkit-keyframes my-super-animation
{
    0%   { left: 0px; }
    50%  { left: 800px; }
    70%  { left: 250px; }
}

@-moz-keyframes my-super-animation
{
    0%   { left: 0px; }
    50%  { left: 800px; }
    70%  { left: 250px; }
}

@-o-keyframes my-super-animation
{
    0%   { left: 0px; }
    50%  { left: 800px; }
    70%  { left: 250px; }
}

@keyframes my-super-animation
{
    0%   { left: 0px; }
    50%  { left: 800px; }
    70%  { left: 250px; }
}

Optimisations

Les transitions et animations peuvent être très coûteuses en terme de performance.

Aujourd'hui on parle de l'objectif 60 FPS pour les sites.

C'est la fréquence à laquelle une animation est agréable visuellement et la majorité des écrans utilisent cette fréquence.

Pour le navigateur, il existe 4 étapes de rendu du DOM

  • Styles : Calculs sur les valeurs CSS
  • Layout (ou reflow) : Positionnement des blocks les uns par rapport aux autres en fonction de leur style
  • Paint (ou repaint) : Remplissage de ces blocks (texte, fond, ombres, etc.)
  • Composite : Transformations et opacité

Chacune de ces étapes prend du temps et le déclenchement de l'une provoquera celui des suivantes dans l'ordre

L'étape Composite est rapide pour deux raisons

  • C'est la dernière donc elle ne déclenchera pas d'autres étapes.
  • Elle utilise la carte graphique permettant les calculs en parallèle. On parle d'accélération matérielle.

Les étapes de Layout et Paint sont lourdes. Il faut les éviter dans la mesure du possible.

Certaines propriétés CSS ne déclenchent que l'étape Composite lorsqu'on les modifie.

  • transform
  • opacity

Le dev tools permet de monitorer les performances de vos animations

  • Clique droit n'importe où suivi de Inspecter
  • ESC pour ouvrir la console
  • pour ouvrir les panneaux optionnels
  • Choisir Rendering
  • Cocher Paint Flashing pour afficher en vert toutes les étapes de Painting sur la page

Un autre bon outil de monitoring du dev tools est l'onglet Performance (un peu plus difficile à utiliser)

  • Clique droit n'importe
  • Choisir Inspecter
  • Ouvrir l'onglet Performance

Lorsque la propriété transform ou opacity d'un élément s'apprête à changer, le navigateur crée un calque pour cet élément. Comme dans photoshop, cela permet de le traiter indépendamment du reste et cela permet d'améliorer les performances.

La création d'un calque demande un peu de ressources et va déclencher un paint unique au début.

La propriété will-change permet d'avertir le navigateur que telles propriétés vont changer. Le navigateur pourra donc prendre l'initiative de créer un calque tout de suite.


.transition
{
    transition: all 2s;
    will-change: transform, opacity;
}

Compatibilité

Il ne faut utiliser will-change que si nécessaire pour éviter de saturer la mémoire du GPU.

Quelques articles

Élégance

Vos transition / animations doivent suivre quelques règles :

  • Subtiles (rapides, peu prononcées)
  • Agréables
  • Homogènes
  • Performantes
  • Ne pas gêner l'UX

Démonstrations