Анимация движения CSS «Бегущий Санта». Покадровая анимация CSS @keyframes

В сегодняшнем уроке я покажу вам как можно с помощью CSS реализовать на сайте (в HTML документе) анимацию в виде движущегося объекта. В нашем случае – это будет Санта Клаус (или Дед Мороз). И вот этот персонаж будет не просто шевелиться, он ещё будет и передвигаться с левой части окна браузера к правой.

Такой вид анимации очень часто называют покадровой анимацией, или анимация спрайта. Суть её заключается в том, что для анимации используются отдельные кадры. И эти кадры поочерёдно выводятся на экран один за другим. А эффект движения достигается путём смещения кадра в сторону.

Например, у нас есть картинка, на которой изображён Санта Клаус. Эта картинка состоит из нескольких спрайтов (кадров). И если эти кадры быстро сменять один за другим, то мы получим эффект движущегося персонажа.

анимация движения css

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

Правило @keyframes

Реализовывать анимацию мы будем с помощью правила CSS @keyframes. Это правило устанавливает стили для ключевых кадров анимации. То есть с помощью правила @keyframes мы указываем браузеру, как именно кадры должны менять друг друга и другие их стили (мы можем указать прозрачность, цвет, положение кадра и другие параметры).

Синтаксис

@keyframes <переменная> { [ from | to | <проценты> ] [, from | to | <проценты> ]* }

где,

  • <переменная> - это уникальная переменная, которая связывает @keyframes с animation, через это свойство настраивается время анимации и другие её параметры.
  • from - первый ключевой кадр, аналогичен 0%.
  • to - последний ключевой кадр, аналогичен 100%.
  • <проценты> - устанавливает ключевой кадр в процентах от времени всей анимации.

Пример

@keyframes myanime {
from { left: 0; }
to { left: 300px; }
}


В данном примере:

  • myanime – имя анимации;
  • from to - ключевые слова с помощью которых мы указываем как будет меняться значение свойства left (от 0 до 300px).

Вместо ключевых слов from to можно использовать проценты. Например, 0% и 100%.

Анимация движения CSS на реальном примере

See the Pen Анимация движения CSS «Бегущий Санта» by Дмитрий (@lubny2011) on CodePen.

Давайте на реальном примере рассмотрим, как заставить наш персонаж не просто шевелиться, а ещё и передвигаться по экрану.

Шаг 1. Первое что нам нужно – это создать отдельную папку для нашего проекта. Назовём её Run Santa.

Шаг 2. Далее в папке Run Santa создадим ещё папку css (в ней будет храниться файл со стилями), папку img (в ней будет картинка с изображением Санты) и файл index.htm (это будет наш веб-документ, при запуске которого на экране в браузере появится бегущий Санта).

Шаг 3. В папке css создадим файл style.css. Здесь мы немного позже пропишем стили (правила) нашей анимации.

Шаг 4. Теперь нам нужно найти подходящую картинку со спрайтами. В строке поиска вводим поисковый запрос «sprite sheet Santa» («или спрайт Санта»). Переходим в раздел картинки и находим подходящую для наших целей спрайт анимацию. Сохраняем эту картинку в папку img.

Шаг 5. Теперь давайте откроем файл index.html любым текстовым редактором и напишем в нём следующий код:

<div class="sprite-container">
<div class="sprite-image"></div>
</div>

Здесь мы сначала создаём контейнер для анимации <div class="sprite-container"></div> и помещаем в этот контейнер нашу картинку.

С помощью блока <div class="sprite-image"></div> мы будем выводит в браузере картинку.

Шаг 6. Теперь давайте перейдём в папку css и откроем любым текстовым редактором файл style.css.

Шаг 7. В этом файле прописываем следующий код:

.sprite-container {
    height: 100vh; /*100% высоты экрана*/
    display: flex;
    align-items: center; /*чтобы картинка была по центру*/
}

.sprite-image {
    height: 105px; /*высота спрайта (высота одного кадра)*/
    width: 100px; /*ширина спрайта (ширина одного кадра)*/
    background: url(https://d-nik.pro/images/stories/santa.jpg) 0px 0px; /*картинка со спрайтами с позицией в верхнем левом углу (0px 0px)*/
    animation: play 0.8s steps(6) infinite, /*анимация называется play, скорость анимации 0.8s, нужно сделать 6 шагов (6 кадров), анимация происходит непрерывно (зациклено) - infinite*/
        step 15s linear infinite; /*ещё одна анимация, длительностью 15s, линейный, зацикленый*/
    position: absolute; 
    left: 0;
}

@keyframes play {
    100% {
        background-position: -600px; /*ширина картинки со спрайтами*/
    }
}

@keyframes step {
    100% {
        left: 100%; /*передвижение влево до самого конца*/
    }
}

К каждому правилу я постарался дать объяснение в виде комментариев. Думаю, что разобраться в этом вам не составит труда.

Как сделать анимацию в CSS. Видео

АВТОРИЗАЦИЯ