Animation css

Un exemple

On définit une image svg que l'on va chercher à translater:

Pour translater notre image svg, on la déclare en position relative puis on déclare une animation. Enfin on déclare sur le css de l'élément à animer l'animation et un certain nombre de paramètres de cette animation.

Essayez les modifications suivantes pour comprendre l'essentiel des rôles:

  • Modifiez animation-duration: 10s; en animation-duration: 3s;
  • Modifiez animation-timing-function: steps(10); en animation-timing-function: steps(3);
  • Modifiez animation-timing-function: steps(10); en animation-timing-function: ease-out;
  • Modifiez animation-direction: alternate; en animation-direction: normal;
  • Modifiez animation-iteration-count: infinite; en animation-iteration-count: 2;

Quelques pages à consulter sur le web:

Seconde version de l'exemple

On peut également utiliser les transformations pour un effet analogue.

Troisième version de l'exemple

On peut également agir sur d'autres attributs.

Un autre exemple

Un exemple avec des positions absolues: