Fonctions transition

cubic-bezier

Exemple:

.block {
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

La fonction cubic-bezier() permet de définir un timing personnalisé pour une transition donnée.
```
cubic-bezier(x1,y1,x2,y2)
```
Les coordonnées indiquent les positions des poignées Bezier de début et de fin (entre 0 et 1).
La courbe créée correspond à l’accélération de l’animation au fil du temps:
- plus la courbe est raide, plus l’animation est rapide
- plus la courbe est plate, plus l’animation est lente
- si la courbe fait des demi-tours, l’animation effectue des rebonds
Quelques exemples:
Courbes béziers
Les mots clés ease, linear, ease-in, ease-out, ease-in-out
sont des raccourcis pour les courbes bézier usuelles.

Créer une courbe bézier
Courbes bézier usuelles

steps

Exemple:

.animate {
  animation: my-animation .8s steps(10) infinite;
}

La fonction steps permet d’afficher une animation par saccades,
ce qui peut permettre de simuler une animation GIF par exemple.

steps(<integer>, [start \| end])

Quelques exemples:

/* Anime avec un sprite de 10 images */
div {
  background-image: url("sprite-steps.png");
  height: 72px;
  width: 50px;
  animation: play .8s steps(10) infinite;
}
@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

/* Anime 5 caractères de largeur 1ch chacun */
div {
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;

  animation-name: typing;
  animation-iteration-count: infinite;
  animation-direction: reverse;

  animation-timing-function: steps(6,start);
  width: 6ch;
  animation-duration: 6s;
}
@keyframes typing {
    to { width: 0; }
}

Hello

Autres exemples d’animation avec steps

This site is open source. Improve this page.