Завдання

Створити привабливу картку онлайн-магазину електроніки, де кожна картка містить зображення, назву та ціну. Необхідно підвищити візуальну привабливість, додавши такі анімації:

1. Масштабування зображення: Використати правило ключових кадрів increaseImageSize для додавання ефекту масштабування до елемента зображення, збільшуючи його на 20%. Кінцевий результат має бути scale(1.2).
2. Обертання ціни: Реалізувати правило ключових кадрів rotatePrice для додавання ефекту обертання до елемента ціни, здійснюючи повний оберт. Кінцевий результат має бути rotate(360deg).

Використовувати заздалегідь визначені правила ключових кадрів.

1. Для анімації масштабування:
   • На початку (0%), використовуйте scale(1) для збереження початкового розміру;
   • На середині (50%), збільшіть розмір до scale(1.1);
   • В кінці (100%), збільшіть розмір до scale(1.2).
2. Для анімації обертання:
   • На початку (0%), залиште кут обертання rotate(0deg);
   • На середині (50%), оберніть на половину до rotate(180deg);
   • В кінці (100%), завершіть обертання до rotate(360deg).