Маленький мультфильм из пяти картинок и чистого CSS. Наведите курсор на сцену, потом на принца и на лягушку, а затем нажмите и держите кнопку мыши.

Сценарий

Как это сделано

Сцена — квадрат 200×200 пикселей. Его центрирует на странице flexbox: у контейнера display: flex, justify-content: center и align-items: center. Внутри сцены персонажи расставлены абсолютным позиционированием, у каждого свой слой.

Каждое действие привязано к псевдоклассу. .scene:hover .frog запускает анимацию frog-appear: лягушка за 1,4 секунды проходит три ключевых кадра — справа за краем сцены, в верхней точке прыжка и рядом с принцем. Одновременно проявляется подпись «Ты кто?». .prince:hover прячет цельную картинку принца и показывает вместо неё тело и отдельную голову, а голова качается анимацией shake-head вокруг точки transform-origin: 50% 85% — примерно там, где шея.

Превращение работает на .scene:active, то есть только пока кнопка мыши нажата. Фильтр sepia(1) окрашивает сцену в цвет старой фотографии, лягушка исчезает, а принцесса вырастает из scale(0.15) до натурального размера. Точка роста — у её ног (transform-origin: 50% 100%), поэтому принцесса «поднимается» из лягушки, а не раздувается из центра. Вопрос в подписи сменяется ответом «Я принцесса!».

Все картинки помечены draggable="false", а у сцены стоит user-select: none. Без этого долгое нажатие начинало бы перетаскивание картинки или выделение текста и ломало бы превращение.

Почему именно так

Весь ролик держится на трёх состояниях, которые браузер отслеживает сам: курсор над сценой, курсор над персонажем и нажатая кнопка мыши. Поэтому не понадобилось ни строчки JavaScript, а анимация никогда не «зависает» в промежуточном положении: стоит увести курсор, и сцена спокойно возвращается к началу. Ключевые кадры @keyframes описывают только движение, а появление и исчезновение сделаны переходами transition по прозрачности и масштабу. Так каждая часть отвечает за одно действие, и её легко поменять отдельно от остальных.