Transitionstart - Micro-onde

Pour cet exercice vous devez compléter l’animation d’un four micro-onde afin de le rendre plus réaliste grâce aux événements transitionstart et transitionend.

Aperçu du résultat 👇

Matériel

Pen de départ 

Médias 🖼️

Ding
https://ex.smnarnold.com/animations-transitions/ding.mp3
Heating
https://ex.smnarnold.com/animations-transitions/mirco-onde.mp3

Requis

Le bouton Start déclenche une transition sur l'élément .progress.

  1. Lorsque la transition débute, déclenchez le son en pièce jointe Heating. Attention, le son ne doit pas démarrer avant que le compte à rebours soit terminé!

  2. Lorsque la transition est terminée, retirez la classe .running sur l'élément <body>, mettre le son Heating à pause et déclencher le son Ding.

Notes de cours 📚