В сегодняшнем уроке я покажу вам как можно с помощью CSS реализовать на сайте (в HTML документе) анимацию в виде движущегося объекта. В нашем случае – это будет Санта Клаус (или Дед Мороз). И вот этот персонаж будет не просто шевелиться, он ещё будет и передвигаться с левой части окна браузера к правой.
Такой вид анимации очень часто называют покадровой анимацией, или анимация спрайта. Суть её заключается в том, что для анимации используются отдельные кадры. И эти кадры поочерёдно выводятся на экран один за другим. А эффект движения достигается путём смещения кадра в сторону.
Например, у нас есть картинка, на которой изображён Санта Клаус. Эта картинка состоит из нескольких спрайтов (кадров). И если эти кадры быстро сменять один за другим, то мы получим эффект движущегося персонажа.
Обратите внимание на то, что для такого вида анимации мы используем не несколько файлов изображений, а всего лишь один файл. На картинке наш персонаж изображён в разных позах.
Правило @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%; /*передвижение влево до самого конца*/
}
}
К каждому правилу я постарался дать объяснение в виде комментариев. Думаю, что разобраться в этом вам не составит труда.