Бешеный конкурс!
8:38
Автор: Рубрика: CSS-рецепты 4 комментария

Как составлять в css3 keyframes? Пример анимации

Приветствую всех. В этой статье я покажу вам, как правильно писать в css3 keyframes, то есть составлять кадры для анимаций, которые потом можно использовать для различных элементов.

Как писать в css кадры для анимации?

Для начала давайте рассмотрим такой кусок кода:keyframes в css

Это простейший пример того, как составлять кадры, он состоит всего из двух переходов, хотя на самом деле их может быть неограниченное количество. Итак, первым делом мы должны написать само слово @keyframes после которого сразу же указать имя создаваемой анимации. Здесь можно написать произвольное значение.

Далее открываем фигурные скобки и начинаем описывать сам анимационный эффект. Ключевое слово from означает 0% анимации, то есть состояние элемента, в котором он будет находиться в самом начале ее выполнения. Слово to обозначает то, какие свойства должны примениться к блоку в самом конце анимации.

Таким образом, в примере на картинке блок в самом начале будет шириной в 100 пикселей, а к концу анимации расширится в 2 раза. Все, эффект создан. Но у нас пока нет связки с каким-то конкретным элементом, на который будет действовать этот эффект, а также не задана длительность выполнения анимации.

Как связать кадры с элементом?

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

animation-name: width;
animation-duration: 3s;

Первое отвечает за саму связку. Таким образом, на этом элементе будет выполняться анимация width, которую мы раньше описали. Duration определяет длительность анимации. Обычно записывается в секундах. Пусть будет 3 секунды, но здесь может быть любое значение. Теперь если вы обновите страницу, то выбранный нами блок в течение трех секунд будет растягиваться вдвое, после чего вернется в исходное положение.

Проценты для записи keyframes

Ранее мы рассмотрели с вами слова from и to, которые обозначают начало и конец анимации, то есть равны на самом деле 0% и 100%. Но в большинстве случаев вам понадобится более гибкое управление. В таком случае воспользуйтесь процентами вместо того, чтобы использовать эти 2 слова. В этом примере кода вы можете увидеть процентную запись:

@keyframes width{
0%{ width: 200px;}
27%{width: 170px;}
65%{width: 185px;}
100%{ width: 500px; background: yellow }
}

К слову, это выглядит следующим образом:

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

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

Другие полезные свойства анимации

По умолчанию анимация выполняется 1 раз. Управлять этим можно с помощью свойства animation-iteration-count. Его значением является число повторений. Чтобы установить бесконечное количество повторов, запишите в качестве значения слово infinite.

Также если помните, я говорил о том, что после завершения анимационных эффектов, элемент возвращается в свое исходное положение. Но с помощью свойства:

animation-fill-mode: forwards;

Можно сделать так, что элемент сохранит состояние, которое он приобрел в самом конце анимации.

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

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

Практика! Удары по воротам с помощью keyframes

Это для тех, кто хочет потренироваться в создании анимации. Скачайте этот архив и откройте index.html в браузере. Там вы увидите мяч, который летает в ворота. Редактируйте код и создавайте удары по своим траекториям, заодно разберетесь с анимацией и перемещением элементов.

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

4 комментария
  • Михаил

    Анимация это лучшее, что появилось в css3!

    2016-05-31 в 5:02 | Ответить
    • Михаил

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

      2016-05-31 в 5:04 | Ответить
  • Валерий

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

    2016-04-14 в 10:20 | Ответить
    • Михаил

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

      2016-04-14 в 4:01 | Ответить