/Vanilla-Front-AnimationCSS

Vanilla-Front-AnimationCSS

Les Animations CSS

📺 Présentation

Lien : LES ANIMATIONS / TRANSITIONS CSS

Pour les TP d'animations, vous ne pouvez utiliser que du CSS !

⚠️ PAS DE JS ! ⚠️ Pensez à faire un fork des codepens !

📚️ Ressources

Pour réussir les TP et exercices , vous devez absolument lire, comprendre et utiliser ces ressources :

💪 Exercice d'échauffement

https://codepen.io/hamza-karfa/pen/poEYQRP

Consignes :

  • Appliquer une transformation pour doubler les dimensions de l'image
  • Appliquer une transformation pour pivoter l'image de 20 degrés
  • Appliquer une transition de 200 millisecondes de façon non linéaire
  • Ajouter un filtre de flou seulement à l'effet de survol

🍔 TP 1 : Transitions

Résulta attendu : https://i.gyazo.com/af61a8836b73c3e7770dda81685945bc.gif

Hover transition exercice

Dans cet exercice vous allez devoir animer cette carte de 3 manière différentes :

  • la partie rouge 'caption' n'est pas visible au début puis apparaît depuis le bas de l'image

  • l'image du hamburger remonte légèrement vers le haut

  • le bouton s’agrandit au hover de la souris

Consignes :

  • faire descendre la partie 'caption' sous l'image
  • au hover de l'image, 'caption' transitionne du bas de l'image pour apparaître en entier sans dépasser sa taille
  • l'image du hamburger remonte de quelques pixel pour donner un effet de mouvement au moment de la transition de 'caption'
  • le bouton (qui est en faite une balise <a>) grossit au hover

🏎️ TP 2 : Transitions + Keyframes

Résultat attendu : https://*/5df0b571ca2ee79fdb9ecde2f90b15a1.gif

Mario Kart

Dans cet exercice vous disposez d'une base prête à coder qui vous permettra de saisir les concepts de l'animation CSS.

Votre travail sera de compléter les trous et de comprendre comment marche les transitions et les keyframes

Consignes :

  • Paramétrer les animations de manière à appeler les keyframes
  • Coder la keyframe drive pour faire avancer Luigi et mario
  • Faire en sorte que Mario et Luigi ne se déplacent pas à la même vitesse
  • Ils doivent avancer de gauche à droite indéfiniment
  • 🔥 bonus → Mario doit faire un saut de temps en temps
  • Donner un effet de caméra qui suit la course en animant la route et les nuages

🔥 Extra

Créer et intégrer un preuve de concept (POC) d'une page type single product

Reproduire ces effets visuels sur cards : Hover Effect Ideas | Set 2

🥇Reproduire l'effet Glitch suivant : CSS Glitch Effect | Codrops (Hardcore)

Image Glitch Effect | Demo 1 | Codrops

🏆 Objectifs

  • Comprendre et maîtriser les transitions et transformations CSS
  • Comprendre et maîtriser les animations et keyframes
  • Comprendre qu'il est possible de se passer de JS pour faire des interactions

👀 A voir !