Анімуємо картинку в CSS Для цього відбираємо зображення при наведенні, прописуємо transform, за допомогою rotate вкажемо поворот на 30 градусів і за допомогою додаткової функції збільшимо його в два. Далі задаємо розмиття за допомогою фільтра filter: blur (2px); у 2 пік.
Функція rotate(α) повертає елемент у двовимірному просторі навколо точки обертання на заданий кут α. Точка обертання за умовчанням знаходиться в центрі елемента і може бути змінена за допомогою властивості transform-origin. rotate(α) відповідає rotateZ(α).
Анімацію можна назвати як завгодно, нехай буде wipe-enter. Тут HTML-елемент буде збільшуватися завширшки, а потім у висоту. Після того, як визначено ключові кадри, можна використовувати анімацію для елемента, встановивши якість animation-name назву ключових кадрів: wipe-enter .