Tarefa

Criar um cartão envolvente de loja online para eletrônicos, onde cada cartão inclui uma imagem, nome e preço. O objetivo é aprimorar o apelo visual incorporando as seguintes animações:

1. Imagem com Escala: Utilize a regra de keyframes increaseImageSize para adicionar um efeito de escala ao elemento de imagem, tornando-o 20% maior. O resultado final deve ser scale(1.2).
2. Preço Giratório: Implemente a regra de keyframes rotatePrice para adicionar um efeito de rotação ao elemento de preço, completando uma volta completa. O resultado final deve ser rotate(360deg).

Utilize as regras de keyframes predefinidas.

1. Para a animação de escala:
   • No início (ponto 0%), utilize scale(1) para manter o tamanho original;
   • No ponto intermediário (ponto 50%), aumente o tamanho para scale(1.1);
   • No final (ponto 100%), aumente o tamanho para scale(1.2).
2. Para a animação de rotação:
   • No início (ponto 0%), mantenha o ângulo de rotação em rotate(0deg);
   • No ponto intermediário (ponto 50%), rotacione até a metade para rotate(180deg);
   • No final (ponto 100%), complete a rotação com rotate(360deg).