Taak

Ontwerp een aantrekkelijke online winkelkaart voor elektronica, waarbij elke kaart een afbeelding, naam en prijs bevat. De opdracht is om de visuele aantrekkingskracht te vergroten door de volgende animaties toe te passen:

1. Afbeelding schalen: Gebruik de increaseImageSize keyframes-regel om een schaal-effect toe te voegen aan het afbeeldingselement, zodat deze 20% groter wordt. Het eindresultaat moet scale(1.2) zijn.
2. Prijs roteren: Implementeer de rotatePrice keyframes-regel om een rotatie-effect toe te voegen aan het prijselement, waarbij één volledige draai wordt gemaakt. Het eindresultaat moet rotate(360deg) zijn.

Gebruik de vooraf gedefinieerde keyframes-regels.

1. Voor de schaalanimatie:
   • Aan het begin (0%-punt), gebruik scale(1) om de oorspronkelijke grootte te behouden;
   • Op het midden (50%-punt), vergroot de grootte naar scale(1.1);
   • Aan het einde (100%-punt), vergroot de grootte naar scale(1.2).
2. Voor de rotatie-animatie:
   • Aan het begin (0%-punt), houd de rotatiehoek op rotate(0deg);
   • Op het midden (50%-punt), roteer halverwege naar rotate(180deg);
   • Aan het einde (100%-punt), voltooi de rotatie met rotate(360deg).