Tarea

Crear una tarjeta atractiva para una tienda en línea de productos electrónicos, donde cada tarjeta incluya una imagen, nombre y precio. El objetivo es mejorar el atractivo visual incorporando las siguientes animaciones:

1. Escalado de imagen: Utilizar la regla de keyframes increaseImageSize para añadir un efecto de escalado al elemento de imagen, aumentando su tamaño en un 20%. El resultado final debe ser scale(1.2).
2. Rotación del precio: Implementar la regla de keyframes rotatePrice para añadir un efecto de rotación al elemento de precio, completando una vuelta completa. El resultado final debe ser rotate(360deg).

Utilizar las reglas de keyframes predefinidas.

1. Para la animación de escalado:
   • Al inicio (punto 0%), utiliza scale(1) para mantener el tamaño original;
   • En el punto medio (punto 50%), aumenta el tamaño a scale(1.1);
   • Al final (punto 100%), incrementa el tamaño a scale(1.2).
2. Para la animación de rotación:
   • Al principio (punto 0%), mantiene el ángulo de rotación en rotate(0deg);
   • En el punto medio (punto 50%), rota a la mitad hasta rotate(180deg);
   • Al final (punto 100%), completa la rotación con rotate(360deg).