» » » CSS анимация — свойство animation
logotip

CSS анимация — свойство animation

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

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

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

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

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

css animation

Потенциал 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 анимации.

До встречи!

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

(следующая статья)

Комментарии: 26

  1. Юлия:

    Заинтересовала возможность делать анимацию. Я правильно понимаю, что ее можно использовать на сайтах, созданных на движке Вордпресс?

    Ответить
    • Виталий Кириллов:

      Юлия, css анимацию можно применять на любых движках.

      Ответить
  2. Вика:

    Очень крутая информация, я уже даже знаю как ее применю! Спасибочки!

    Ответить
  3. Андрей:

    Спасибо за интересный материал. Пока не придумал как его применить. Мешает чтению «прыжки» текста вниз и обратно на одну строку. Аж глаза устали. Виталий, это для чего?

    Ответить
    • Виталий Кириллов:

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

      Ответить
      • Сергей:

        У меня тоже текст прыгал, пока я не уменьшил масштаб отображения страницы в браузере 🙂

        Ответить
  4. GetSocial:

    На основе CSS можно делать много всего интересного. Спасибо за статью!

    Ответить
  5. Александр:

    Спасибо Вам за полезную статью! Теперь будет иногда использовать CSS вместо JS 🙂

    Ответить
  6. Марат:

    Здравствуйте! А с помощью какого стиля сделать переливание цветом? Чтобы применить этот стиль например к кнопке.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Марат!

      color: код цвета;

      Ответить
      • Марат:

        Я имею в виду чтобы по кнопке бежала допустим зеленая полоса цвета (как при копировании)

        Ответить
        • Виталий Кириллов:

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

          Ответить
  7. AndreyEx:

    Вроде поисковики не очень любят пеструю движущую рекламу

    Ответить
    • Виталий Кириллов:

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

      Ответить
    • Марат:

      А если это не реклама? 🙂

      Ответить
      • Виталий Кириллов:

        Я говорю про различные фишки.

        Ответить
      • AndreyEx:

        Обычно это реклама, движение (мигание объектов)

        Ответить
        • Виталий Кириллов:

          Я никому ничего не навязываю, я показываю.

          Ответить
          • AndreyEx:

            Да к вам претензий вообще никаких нет, это сказано сайтам с наклонностями к впихиванию ширпортреба, раньше много таких было в буржунете, пока google пингвин не обновил

            Ответить
  8. Павел:

    Виталий здравствуйте, скажите как мне сделать такой же вывод содержание статьи (анонс), как у вас на блоге. Вы используете плагин или обходитесь без него?
    С уважением Павел.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Павел! Я без плагина обхожусь, информация есть в общем доступе. Есть и плагины с похожим функционалом: Simple TOC и Table of Contents Plus.

      Ответить
  9. Александр:

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

    Ответить
    • Виталий Кириллов:

      Чтобы картинки не прыгали на следующую строку, надо указать width (ширину блока).

      Ответить
  10. Андрей:

    Некорректно спросил. Я имею ввиду следующее. Чтобы сразу за окончанием строки она начиналась заново, без промежутков и пробелов. Сейчас у меня новая строка начинается после того, как за экран уйдет предыдущая.

    Ответить
    • Виталий Кириллов:

      Посмотрите тут.

      Ответить
      • Юрий:

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

        Только чтобы не дергалась анимация, лучше использовать CSS свойство: animation-direction: alternate-reverse.

        Стандартная функция бегущей строки должна «отмереть», как это сделали старые HTML теги.

        Ответить

Оставить комментарий

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS