Анимация

Оживление картинки: покачивание, поворот, появление, смена кадров. В браузере её делают стилями — transform и @keyframes, — и JavaScript для этого не нужен. Скрипт нужен, когда движением управляет игрок.

Как это выглядит: @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } } .hero { animation: float 1.6s infinite; }

Не путать: Анимация — не видео и не гифка: это правило, по которому браузер сам перерисовывает элемент. И не путать с transition: transition сглаживает изменение, которое уже произошло (например, при наведении), а animation запускается сама и может повторяться бесконечно.

Откуда слово: От латинского anima — «душа, дыхание»; animare — «одушевлять, вдыхать жизнь». Тот же корень у «аниматора» — художника, который «одушевляет» рисунки, и у слова animal, буквально «дышащее». Анимация и правда про дыхание: покачивание персонажа — это его дыхание.

Где это проходят: урок 7.3 «Движение без JavaScript: transform и @keyframes» · Интерфейсы и сайты с нуля

Весь словарь программиста — 135 слов с объяснениями, примерами и ссылками на уроки.