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

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

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

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

Все мы, вебмастера и разработчики, постоянно работаем с сайтами. Хотел бы вам порекомендовать площадки, которыми пользуюсь сам:
  1. Reg.ru - здесь регистрирую и продлеваю доменные имена, очень надежная компания!
  2. HostIQ - хостинг премиум качества.
  3. Ihor - более бюджетный, но тоже очень качественный хостинг-провайдер.
  4. Telderi.ru - единственная надежная биржа в рунете, на которой можно купить готовые сайты с доходом!

Это простейший пример того, как составлять кадры, он состоит всего из двух переходов, хотя на самом деле их может быть неограниченное количество. Итак, первым делом мы должны написать само слово @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 }
}

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

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

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

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

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

animation-fill-mode: forwards;

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

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

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

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

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

Понравилась статья? Поделиться с друзьями:
Комментариев: 4
  1. Михаил

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

    1. Михаил (автор)

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

  2. Валерий

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

    1. Михаил (автор)

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

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: