Animation en CSS

et JavaScript

Raconté par Vincent Jugé
sur la base d'un cours créé par Rémi Forax

Transition en CSS

CSS3 Transition

Working Draft - 11 October 2018
https://www.w3.org/TR/css3-transitions/

Manipulation du DOM

Appeler la méthode element.classList.toggle(class) va ajouter (ou enlever) la classe class à un element HTML.

.box1 {
  background: red;
}
.box1.anim1 {
  background: green;
}

const box = document.querySelector('.box1');
box.onclick = () => {
  box.classList.toggle('anim1');
};

Transformation

La propriété transform permet de spécifier une tranformation (translation, rotation, etc).

.box2 {
  transform: translate(0px, 0px);
}
.box2.anim2 {
  transform: translate(0px, 100px);
}

const box = document.querySelector('.box2');
box.onclick = () => {
  box.classList.toggle('anim2');
};

Transition CSS

La propriété transition permet de demander une animation qui va effectuer une interpolation entre les deux positions.

.box3 {
  transform: translate(0, 0);
  transition: transform 1000ms;
}
.box3.anim3 {
  transform: translate(0px, 100px);
}

const box = document.querySelector('.box3');
box.onclick = () => {
  box.classList.toggle('anim3');
};

Rotation et étirement

En plus des translations, on peut faire des rotations (rotate) et des agrandissements (scale).

.box4 {
  transform: scale(0.5) rotate(0);
  transition: transform 1s;
} 
.box4.anim4 {
 transform: scale(2) rotate(180deg);
}

const boxes = document.querySelectorAll('.box4');
boxes.forEach(box => box.onclick = () => {
  box.classList.toggle('anim4');
});

Transformation 3D

Et on peut faire des trucs cool en 3D !

.box5 {
  transform: rotateY(0) rotateZ(0);
  transition: transform 4s;
} 
.box5.anim5 {
  transform: rotateY(360deg) rotateZ(360deg);
}

const box = document.querySelector('.box5');
box.onclick = () => {
  box.classList.toggle('anim5');
};

Les propriétés de transition

transition-property: propriété(s) qui vont changer
transition-duration: temps de l'animation (en ms ou s)
transition-timing-function: comment se fait l'interpolation

transition regroupe ces propriétés, dans cet ordre.

Opacité

L'opacité peut aussi être animée.

.box6 {
  opacity: 1.0;
  transition: opacity 1.5s;
} 
.box6.anim6 {
  opacity: 0;
}

const box = document.querySelector('.box6');
box.onclick = () => {
  box.classList.toggle('anim6');
};

Transitions avec plusieurs attributs

On sépare par des ',' si on a plusieurs attributs.

.box7 {
  opacity: 1.0;
  transform: scale(1);
  transition: opacity 0.5s, transform 2s;
} 
.box7.anim7 {
  opacity: 0.5;
  transform: scale(1.1);
}

const box = document.querySelector('.box7');
box.onclick = () => {
  box.classList.toggle('anim7');
};

Easing

On peut choisir la fonction d'interpolation
linear, ease-in, ease-out, ease-in-out.

.box8 {
  transform: translate(0px, 0px);
  transition: transform 1000ms linear;
}
.box8.anim8 {
  transform: translate(800px, 0px);
}

Cela permet de rendre le mouvement plus naturel.

Easing - Courbe de Bézier

On peut définir précisément la courbe de Bézier à utiliser.

.box9 {
  transform: translate(0px, 0px);
  transition: transform 1000ms cubic-bezier(0.42, 0, 0.58, 1);
}
.box9.anim9 {
  transform: translate(800px, 0px);
}

cubic-bezier

ease-in-out

Animation en CSS

CSS Animations Level 1

Editor’s Draft - 16 January 2020
https://drafts.csswg.org/css-animations/

Deux concepts

keyframe: état de l'animation définie par l'utilisateur pour un temps donné
animation: indique comment doit se dérouler la séquence de keyframes

Animation

@keyframes permet de définir des keyframes avec un nom.
animation permet d'animer les keyframes.

@keyframes hello-anim {
  0%   { background-color: red; }
  33%  { background-color: green; }
  66%  { background-color: gold; }
  100% { background-color: red; }
}
.box20 {
  animation: hello-anim 4s infinite;
}

Animation & Transformation

On peut bien sûr utiliser les transformations

@keyframes hello-anim2 {
  0%   { transform: translate(0px, 0px); }
  25%  { transform: translate(0px, 200px); }
  50%  { transform: translate(0px, 200px), rotateY(180deg); }
  75%  { transform: translate(0px, 100px), rotateZ(180deg); }
  100% { transform: rotateX(180deg) }
}
.box21 {
  animation: hello-anim2 6s linear infinite alternate;
}

L'animation se fait en regardant ce qui change d'une keyframe à l'autre.

Les propriétés de Animation

animation-name: propriété(s) qui vont changer
animation-duration: temps de l'animation (en ms ou s)
animation-timing-function: comment se fait l'interpolation
animation-iteration-count: nombre de répétitions de l'animation ou infinite
animation-direction: normal ou reverse

animation regroupe ces propriétés, dans cet ordre.

Animation à la main en JavaScript

window.requestAnimationFrame prend une fonction en paramètre qui est appelé avec le temps courant.
box.style permet d'obtenir le style d'un objet DOM.

const mybox1 = document.getElementById('mybox1');
mybox1.style.position = 'absolute';
const anim = function(timestamp) {
  mybox1.style.top = ??
  if (?? > 2000) {
    return; //stop the animation
  }
  window.requestAnimationFrame(anim);
}
window.requestAnimationFrame(anim);

On sauvegarde timestamp dans start pour travailler par rapport à un temps initial.

const mybox1 = document.getElementById('mybox1');
mybox1.style.position = 'absolute';
let start;
const anim = function(timestamp) {
  if (start == undefined) {
    start = timestamp;
  }
  const progress = timestamp - start;
  const top  = progress / 5;
  mybox1.style.top = top + 'px';
  if (progress <= 2000) {
    window.requestAnimationFrame(anim);
  }
}
window.requestAnimationFrame(anim);

Avec la possibilité d'aller à l'envers.

const mybox2 = document.getElementById('mybox2');
mybox2.style.position = 'absolute';
let start;
let fun = v => v / 5;
let reverse = false;
const anim = function(timestamp) {
  if (start == undefined) { start = timestamp; }
  const progress = timestamp - start;
  const top = fun(progress);
  mybox2.style.top = top + 'px';
  if (progress > 2000) {
    reverse = !reverse;
    fun = (reverse)? v => top - v / 5: v => v / 5;
    start = timestamp;
  }
  window.requestAnimationFrame(anim);
}
window.requestAnimationFrame(anim);