Как писать в 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 }
}
К слову, это выглядит следующим образом:
Как видите, это позволяет управлять анимацией куда более гибко, задавая бесчисленное множество переходов и изменений.
Другие полезные свойства анимации
По умолчанию анимация выполняется 1 раз. Управлять этим можно с помощью свойства animation-iteration-count. Его значением является число повторений. Чтобы установить бесконечное количество повторов, запишите в качестве значения слово infinite.
Также если помните, я говорил о том, что после завершения анимационных эффектов, элемент возвращается в свое исходное положение. Но с помощью свойства:
animation-fill-mode: forwards;
Можно сделать так, что элемент сохранит состояние, которое он приобрел в самом конце анимации.
Также по умолчанию эффекты начинают выполняться сразу после того, как вы обновляете страницу в браузере. Но с помощью свойства animation-delay вы можете в секундах задать задержку перед выполнением.
Что ж, на этом я пока закончу эту статью. В будущем добавлю сюда хороший пример анимации с использованием тех свойств, которые мы сегодня рассмотрели. Это уже позволит вам создавать свои, более менее интересные эффекты.
Практика! Удары по воротам с помощью keyframes
Это для тех, кто хочет потренироваться в создании анимации. Скачайте этот архив и откройте index.html в браузере. Там вы увидите мяч, который летает в ворота. Редактируйте код и создавайте удары по своим траекториям, заодно разберетесь с анимацией и перемещением элементов.
Анимация это лучшее, что появилось в css3!