Compito

Crea una scheda accattivante per un negozio online di elettronica, in cui ogni scheda includa un'immagine, un nome e un prezzo. L'obiettivo è migliorare l'aspetto visivo incorporando le seguenti animazioni:

1. Ingrandimento immagine: Utilizzare la regola dei keyframes increaseImageSize per aggiungere un effetto di ingrandimento all'elemento immagine, rendendolo più grande del 20%. Il risultato finale deve essere scale(1.2).
2. Rotazione prezzo: Implementare la regola dei keyframes rotatePrice per aggiungere un effetto di rotazione all'elemento prezzo, completando un giro completo. Il risultato finale deve essere rotate(360deg).

Utilizzare le regole di keyframes predefinite.

1. Per l'animazione di scaling:
   • All'inizio (punto 0%), utilizzare scale(1) per mantenere la dimensione originale;
   • Al punto intermedio (punto 50%), aumentare la dimensione a scale(1.1);
   • Alla fine (punto 100%), aumentare la dimensione a scale(1.2).
2. Per l'animazione di rotazione:
   • All'inizio (punto 0%), mantenere l'angolo di rotazione a rotate(0deg);
   • Al punto intermedio (punto 50%), ruotare a metà fino a rotate(180deg);
   • Alla fine (punto 100%), completare la rotazione con rotate(360deg).