SEO Маяк

Всем привет! Сегодня на seo-mayak.com я расскажу и покажу, что такое CSS анимация.

На блоге уже есть одна статья, посвященная анимации — бегущая строка. Там мы заставляли двигаться текст с помощью чистого HTML, а точнее, с помощью тега marquee. Довольно интересный материал, советую почитать.

Сегодня же мы будем создавать анимацию средствами другого языка программирования, который называется CSS.

Для новичков скажу, что язык CSS (англ. Cascading Style Sheets, в переводе Каскадные Таблицы стилей) — это язык описания внешнего вида веб-страницы. Что это значит? А значит это то, что с помощью данного языка формируется внешний вид любого сайта.

Через CSS мы можем воздействовать на любой элемент страницы, будь-то текст или картинка, можем сдвинуть его в любом направлении или раскрасить в нужный цвет.

Потенциал CSS поистине безграничен, а с выходом CSS3 (третье поколение CSS) появилась возможность заставлять объекты двигаться в реальном времени, причем самым разнообразным образом.

В данной статье мы рассмотрим уникальное свойство CSS3 animation и правило @keyframes, но давайте обо все по-порядку. Поехали!

Основы CSS анимации

Кирпичиками CSS анимации являются: свойство animation и правило @keyframes.

@keyframes — уникальное правило CSS3, позволяющее задавать последовательные кадры анимации.

Свойство animation регулирует подачу анимации. Что я подразумеваю под словом «подача», Вы поймете немного позже.

Итак, снова бегущая строка:

Как видно из наглядного примера, с помощью вышеописанных команд CSS я заставил двигаться текст слева на право, причем с неравномерной скоростью. После чего текст возвращается в исходное положение и анимация проигрывается сначала.

Теперь давайте разберемся как работают свойство animation и правило @keyframes

Свойство animation можно разделить еще на несколько свойств:

animation-name — задает имя анимации;
animation-duration — задает длительность анимации в секундах (s) или миллисекундах (ms);
animation-timing-function — задает скоростные значения анимации;
animation-iteration-count — задает количество повторений анимации;
animation-direction — задает направление анимации;
animation-play-state — задает состояние анимации при наведении курсора;
animation-delay — задает время задержки перед началом анимации в s и ms;
animation-fill-mode — задаем положение элемента до и после анимации.

Чуть позже мы разберем каждое свойство во всех подробностях, а пока я лишь знакомлю Вас с основными инструментами.

Правило @keyframes

Как я уже говорил выше, правило @keyframes задает последовательные кадры анимации. Настало время объяснить, как работает данное правило.

@keyframes name{
from{значение}
to{значение}
}

name — имя анимации;
from — начальное состояние элемента;
to — конечное состояние элемента.

Но можно и по-другому:

@keyframes name{
from {значение}
50% {значение}
to {значение}
}

или так:

@keyframes name{
0% {значение}
20% {значение}
40% {значение}
60% {значение}
80% {значение}
100% {значение}
}

А теперь давайте подробно разберем все свойства animation.

Семейство свойств animation

Для облегчения усвоения материала, после описания каждого свойства, я буду приводить наглядный пример.

Итак, берем текст, к примеру «Бегущаа строка» и в HTML прописываем для него класс:

<span class="ticker">Бегущая строка</span>  

Далее в файле style.css для созданного класса прописываем следующие свойства animation:

.ticker{
animation-name: test;
animation-duration: 4s;
animation-iteration-count: infinite;
}

Ниже пишем правило анимации:

@keyframes test{
from{margin-left: 3px;}
to{margin-left: 600px;}
}

Прежде, чем я покажу, что получилось в итоге, давайте подробно разберем, что мы тут прописали.

animation-name: test; — мы задали имя анимации test;
animation-duration: 4s; — мы задали длительность анимации в 4 секунды;
animation-iteration-count: infinite; — интересное свойство, с помощью которого мы можем задать количество повторений анимации, (infinite — в переводе с англ. «бесконечный»). Также в этом свойстве можно задать цифровое значение повторений, например: 1 — одно повторение (значение по умолчанию), 2 — два повторения и т.д.

@keyframes test — здесь мы по имени test связываем правило анимации @keyframes с его свойствами animation.
from{margin-left:3px;} — задаем начальное положение строки в три пикселя от левого края страницы.
to{margin-left:600px;} — задаем конечное положение строки в шестьсот пикселей от левого края страницы.

В итоге получаем такой эффект:

Бегущая строка

Немного увеличим текст и добавим красок:

HTML

<span class="ticker-1">Бегущая строка</span>

CSS

.ticker-1{
animation-name: test-1;
animation-duration: 4s;
animation-iteration-count: infinite;
font-size: 20px;
font-weight: bold;
color:red;
}
@keyframes test-1{
from{margin-left: 4px;}
to{margin-left: 540px;}
}

Бегущая строка

Теперь давайте более подробно рассмотрим еще одно свойство, которое имеет очень большое значение, так как отвечает за частоту движения объекта и может принимать несколько значений:

Свойство animation-timing-function

animation-timing-function: ease; — скольжение (значение по умолчанию) На примере выше мы не применяли свойство animation-timing-function, но на самом деле оно работало и значение у него было, как раз ease, поэтому и скорость не равномерная.

ease

Свойство animation-timing-function может принимать несколько значений, пройдемся по каждому из них.

HTML

<span class="ticker-2">Бегущая строка</span>

CSS

.ticker-2{
    animation-name: test-2;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    color: red;
    font-size:20px;
    font-weight:bold;
   }
@keyframes test-2{
    from{margin-left:3px;}
    to{margin-left: 540px;}
}

animation-timing-function: ease-in-out;— еще более плавное скольжение;

ease-in-out

animation-timing-function: linear; — равномерная скорость движения;

linear

animation-timing-function: ease-in; — ускорение к концу анимации;

ease-in

animation-timing-function: ease-out; — ускорение в начале анимации;

ease-out

animation-timing-function: cubic-bezier(.число число, .число число); — с помощью этого значения можно задать эффект разнонаправленности движению анимации:

cubic-bezier(.22, 1.47, .26, -0.49)

animation-timing-function: step-start; — это значение я хочу разобрать подробней, и показать Вам еще одно правило @keyframes:

HTML

<span class="ticker-8">step-start</span>

CSS

.ticker-8{
animation-name: test-8;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: step-start;
color: red;
font-size: 20px;
font-weight: bold;
}
@keyframes test-8{
0% {margin-left: 1px;}
10% {margin-left: 60px;}
20% {margin-left: 120px;}
30% {margin-left: 180px;}
40% {margin-left: 240px;}
50% {margin-left: 300px;}
60% {margin-left: 360px;}
70% {margin-left: 420px;}
80% {margin-left: 480px;}
90% {margin-left: 540px;}
100% {margin-left: 600px;}
}

Как видите правило @keyframes может принимать значение в %, что очень удобно при создании анимации. Так вот, с помощью step-start можно проигрывать заданные значения по шагам.

step-start

Если внимательно посмотреть на пример, то можно заметить, что при значении step-start пропускается первый шаг анимации.

animation-timing-function: step-end; — при значении step-end пропускается последний шаг анимации.

step-end

animation-timing-function: steps(число); — значение steps позволяет упростить пошаговую анимацию. В скобках можно просто прописать количество шагов, а в правиле @keyframes задать первый и последний шаг.

HTML

<span class="ticker-10">steps(8)</span>

CSS

.ticker-10{
animation-name: test-10;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: steps(8);
color: red;
font-size: 20px;
font-weight: bold;
}
@keyframes test-10{
from {margin-left: 1px;}
to {margin-left: 600px;}
}

При применении значения steps последний шаг упускается.

steps(8)

С помощью вышеупомянутых значений свойства animation-timing-function можно довольно тонко настроит любую анимацию. Идем дальше.

Свойство аnimation-direction

Теперь мы рассмотрим еще одно интересное свойство, которое называется аnimation-direction и его возможные значения.

HTML

<span class="ticker-11">normal;</span>

CSS

.ticker-11{
animation-name: test-11;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
аnimation-direction:normal;
color: red;
font-size: 20px;
font-weight: bold;
}
@keyframes test-11{
from {margin-left: 1px;}
to {margin-left: 600px;}
}

аnimation-direction:normal; — обычное движение строки слева направо.

normal

animation-direction: reverse; — движение анимации из конца в начало.

reverse

animation-direction: alternate; — анимация проигрывается сначала в обычном режиме, а затем в обратном направлении.

alternate

animation-direction: alternate-reverse; — анимация начинается с конца, доходит до начала, а затем двигается в обратном направлении.

alternate-reverse

В одной из будущих статей я приведу различные примеры CSS анимации, не только бегущую строку, а пока следующее свойство.

Свойство аnimation-delay

C помощью свойства Animation-delay мы можем задать задержку анимации перед началом воспроизведения в секундах или миллисекундах.

HTML

<span class="ticker-15">0s;</span>

CSS

.ticker-15{
animation-name: test-15;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-delay: 0s;
color: red;
font-size: 20px;
font-weight: bold;
}
@keyframes test-15{
from {margin-left: 1px;}
to {margin-left: 600px;}
}

animation-delay: 0s; — значение по умолчанию.

0s

animation-delay: 5s; — теперь давайте зададим задержку в 5 секунд.

5s

animation-delay: -5s; — также можно задать отрицательное значение задержки воспроизведения.

-5s

Есть еще одно интересное свойство.

Свойство аnimation-fill-mode

Работу свойства аnimation-fill-mode можно наблюдать если использовать определенное количества циклов анимации, т.е. в свойстве animation-iteration-count надо задать цифровое значение.

Работа свойства заключается в определении ключевого кадра и воздействие на него, до или после начала анимации.

В примере я задал два повторения и задержку анимации в 5 секунд, но чтобы посмотреть, как работает данное свойство, придется перезагрузить страницу.

HTML

<span class="ticker-18">none;</span>

CSS

.ticker-18{
animation-name: test-18;
animation-duration: 4s;
animation-iteration-count: 2;
animation-fill-mode: none;
animation-delay: 5s;
color: red;
font-size: 20px;
font-weight: bold;
}
@keyframes test-18{
from {margin-left: 1px;}
to {margin-left: 600px;}
}

animation-fill-mode: none; — свойство применяется к первому активному кадру.

none

animation-fill-mode: forwards; — свойство применяется к последнему активному кадру, т.е. после завершения воспроизведения, анимациа сохраниться на последнем кадре.

forwards

animation-fill-mode: backwards; — анимация применит значения для свойств из начального ключевого кадра, даже если кадр еще не активен.

backwards

animation-fill-mode: both; Это своего рода комплексное решение. Анимация применит значения к свойствам первого ключевого кадра в начале воспроизведения, и сохранит значения свойств последнего ключевого кадра после завершения анимации.

both

Осталось последнее свойство из семейства animation.

Свойство аnimation-play-state

Свойство может принимать всего два значения:

animation-play-state: running; — значение по умолчанию, воспроизведение анимации происходит в обычном режиме.

animation-play-state: paused; — остановка анимации на первом шаге.

В примере ниже я использовал способ остановки анимации в момент наведения курсора, с помощью псевдокласса :hover

paused

HTML

<span class="ticker-22">none;</span>

CSS

.ticker-22{
animation-name: test-22;
animation-duration: 8s;
animation-iteration-count: infinite;
cursor: pointer;
color: red;
font-size: 20px;
font-weight: bold;
}
.ticker-22:hover{
animation-play-state: paused;
}
@keyframes test-22{
from {margin-left: 1px;}
50% {margin-left: 600px;}
to {margin-left:1px;}
}

Сокращенное написание свойств animation

Для упрощения верстки css кода, предусмотрено сокращенное написание всех свойств animation в одну строчку. Порядок или последовательность такая:

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode];

Надеюсь понятно, что название свойств надо заменить их значениями и конечно квадратные скобки прописывать не надо. Пример:

.ticker{
animation: test 4s linear 5s infinite reverse;
}

Также можно объединить несколько анимаций, перечисляя значения свойств через запятую:

.ticker{
animation: test-1 4s linear 2s infinite reverse, test-2 8s ease-out 5s 2 alternate, test-3 2s ease-in 3s 10 normal;
}

Конечно, для каждого имени анимации должно быть прописано отдельное правило @keyframes.

Кроссбраузерность

Предполагаю, что прежде всего надо объяснить само понятие «Кроссбраузерность».

На заметку! Кроссбраузерность — корректность отображения сайта во всех популярных браузерах.

Сложного здесь ничего нет, просто для каждого браузера существуют определенные вендорные префиксы.

-webkit-animation: значения; — для браузеров: Chrome, Safari, iOS;
-moz-animation: значения; — для браузера Firefox;
-o-animation: значения; — для браузера Opera;
-ms-animation: значения; — для браузера Internet Explorer.

Действительно, некоторые свойства CSS3 не работают без вендорных префиксов, так что проверяйте отображение анимации во всех популярных браузерах и при необходимости добавляйте префиксы.

На самом деле бегущей строкой, да и одним свойством animation, CSS анимация не ограничивается и в будущем мы обязательно вернемся к этой теме, так что подписывайтесь на обновления блога.

Также в отдельной статье мы рассмотрим все возможные примеры CSS анимации.

До встречи!

С уважением, Виталий Кириллов