Labyrinthe

IMDB

L'objectif de cet exercice est de mettre en pratique les notions AnimeJS suivantes :

• keyframes
• callback
• valeurs relatives
• utilitaire set
• lissage global

Résultat attendu

Consignes

Dans cet exercice, les valeurs de positionnement doivent obligatoirement être configurées avec les unitées cqw et cqh.

• Effectuer un fork du Codepen de départ
• Avec l'utilitaire set(), assigner une valeur de départ à l'élément .dot
  • Déplacement latérale de 10cqw
  • Opacité de 0

Animer l'élément .dot avec les configurations suivantes :

• Durée de 3 secondes
• Boucle infinie
• Lissage outSine sur toute la durée de l'animation
• Animation de l'opacité et des positionnements dans le labyrinthe avec la notion de keyframes
• À chaque fois qu'une boucle se termine, effectuez une animation sur l'élément .wrap

Animer l'élément .wrap

• Rotation relative d'un huitième de tours
• Durée de 2.5 secondes
• Lissage cubicBezier ressemblable à celui dans le résultat attendu

Animer la variable css --primary

• La valeur doit passer de "#f00" à "#0f0" à "#00f"
• Boucle infinie
• Durée de 3 secondes
• Lissage linéaire