Tâche

Créer une carte de boutique en ligne attrayante pour des produits électroniques, où chaque carte comprend une image, un nom et un prix. L'objectif est d'améliorer l'aspect visuel en intégrant les animations suivantes :

1. Agrandissement de l'image : Utiliser la règle de keyframes increaseImageSize pour ajouter un effet d'agrandissement à l’élément image, le rendant 20% plus grand. Le résultat final doit être scale(1.2).
2. Rotation du prix : Mettre en œuvre la règle de keyframes rotatePrice pour ajouter un effet de rotation à l’élément prix, effectuant un tour complet. Le résultat final doit être rotate(360deg).

Utiliser les règles de keyframes prédéfinies.

1. Pour l'animation de mise à l'échelle :
   • Au début (position 0 %), utiliser scale(1) pour conserver la taille d'origine ;
   • Au milieu (position 50 %), augmenter la taille à scale(1.1) ;
   • À la fin (position 100 %), augmenter la taille à scale(1.2).
2. Pour l'animation de rotation :
   • Au début (position 0 %), maintenir l'angle de rotation à rotate(0deg) ;
   • Au milieu (position 50 %), effectuer une rotation intermédiaire à rotate(180deg) ;
   • À la fin (position 100 %), compléter la rotation avec rotate(360deg).