В этой статье будет про то как работает CSS анимация с использованием keyframes, всё написанное здесь, будет максимально простым, понятным и без воды.
Также надо сказать, что здесь не будет показываться наглядно что в итоге получилось использовав тот или иной код, но вы сможете его внизу скачать и поэкспериментировать с ним.
Ещё смотрите статью Делаем простую анимацию через CSS transition, там вы научитесь делать анимацию используя transition.
Базовая работа с @keyframes:
Для начала надо научится с ним работать базова, самые основы так сказать и понять в чём его суть, CSS анимация через keyframes, работает достаточно интересно.
Суть работы с @keyframes:
Суть работы с ним заключаться в том, что он сам @keyframes, просто задаёт когда и какое свойство нужно изменить и всё, для настройки времени анимации или сколько раз она будет проигрываться, используется свойства «animation-…».
Свойства «animation-…» для @keyframes:
Этих свойств очень много и применяются они к элементу, который вы хотите анимировать, сначала покажу только самые основные.
- animation-duration — Задаёт время анимации;
- animation-iteration-count — Задаёт сколько раз будет проигрываться анимация;
- animation-name — Задаёт имя анимации или имя @keyframes;
Это ещё не все свойства, ниже будут ещё, здесь только самые базовые.
Пример работы с @keyframes:
Для примера будет показан блок div, виде квадрата, с помощью анимации будем его изменять, как его создавать в HTML показывать не буду, если вы читаете эту статью, думаю вы уже умеете это делать.
CSS же очень простой, сначала пишем стили для блока, что бы он выглядел как блок, потом уже и сами настройки анимации.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .square { width: 100px; height: 100px; background-color: green; animation-duration: 10s; animation-iteration-count: infinite; animation-name: square1; } @keyframes square { from { width: 100px; background-color: green; } 50% { background-color: blue; } to { width: 200px; background-color: red; } } |
Разбор кода:
Давайте теперь разберем, что тут написано, первые три строчки свойств для нашего квадрата, это размер и цвет блока.
Потом задаём времени и сколько раз должно проигрываться, там используется параметр infinite, что значит проигрывать анимацию бесконечно, ну и в конце задаётся имя анимации.
Теперь что касается самой анимации, задаётся слово @keyframes, после него идёт имя анимации.
В from задаётся начальные свойства элемента, на которую используется анимация, но задавать его не обязательно, также это слово можно заменить, просто написав вместо него 0%.
Что касается 50%, то это какие свойства будут использоваться, когда анимация проигралась на 50%, можно использовать 30%, 20%, 70%, это не важно, главное чтобы не меньше 0% и не больше 100%.
В to это конечное значение, какие свойства должны быть когда анимация закончит проигрываться, также его можно заменить 100%.
Более подробная работа с @keyframes:
В этой части статьи будут только новые свойства «animation-…» и всё, новых способов работы с @keyframes не будет.
Ещё больше свойств «animation-…» для @keyframes:
- animation-direction — определяет, как должна воспроизводится анимация, вперёд, назад или переменно вперед и назад;
- animation-timing-function — это грубо говоря меняет задаёт как происходит анимация, про неё надо писать отдельно;
Теперь я показал на мой взгляд самые важные свойства, но ниже будут ещё, которые могут пригодится.
Пример более продвинутой работы с @keyframes:
Почти точно такой же блок div мы создаём и работаем с ним.
Тут только поменялся CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .square { width: 100px; height: 100px; background-color: red; animation-duration: 10s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear; animation-name: square2; } @keyframes square2 { 90% { background-color: blue; } to { width: 500px; height: 200px; background-color: green; } } |
Разбор кода:
Про код тут нечего говорить, разве что мы не используем from и добавилось два новых свойств, для настройки анимации.
Для animation-direction используется параметр alternate, который говорит, что анимация, после того как проиграется до конца, сразу же начнёт проигрываться в обратном порядке.
Для animation-timing-function используется параметр linear, который делает так, чтобы скорость анимации была равномерной, то есть не как по умолчания, сначала быстро, а потом медленно.
Больше тут не чего сказать.
Работа с @keyframes уровня бог:
Вот тут уже разберём кое что интересное.
Профессиональный пример работы с @keyframes:
Тут почти не чего не поминалось, а HTML вообще не поменялся.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | .square { width: 100px; height: 100px; background-color: blue; animation-duration: 5s, 10s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: linear, ease-in-out; animation-name: squareSize, squareColor; } @keyframes squareSize { 90% { width: 200px; } to { width: 500px; height: 150px; } } @keyframes squareColor { 25% { background-color: red; } 75% { background-color: blue; } to { background-color: green; } } |
Разбор кода:
Вот тут всё уже по интереснее, как видите судя по свойству animation-name, мы применяем две анимации, одна отвечает за размер, вторая за цвет, задаём их через запятую.
Применять две анимации нужно для того, что бы, в разные моменты менять свойства, к примеру, как у нас, размер меняется только два раза, в 90% и к to, тогда как цвет меняется три раза, на 25%, 75% и к to.
Остальные свойства точно также задаём, первый параметр свойства будет для работать для первой анимация, второй для второй анимации, и т.д. и неважно сколько у вас этих анимаций, но если только один параметр у свойство задан, то он будет применяться для всех анимаций.
Дополнительно про анимации:
Также есть свойство animation, оно позволяет задать все свойства для настройки анимации представленные выше, в одном свойстве.
1 2 3 | animation: animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction || animation-fill-mode || animation-play-state || [none | animation-name] |
Дополнительные свойства:
animation-delay — Делает задержку перед проигрыванием анимации;
animation-fill-mode — Определяет как нужно применять стили к элементу анимации, до и после применения;
animation-play-state — Определяет состояние анимации, пауза или проигрыш;
Их не было раньше, так как, мне кажется они не особо нужны, и используются очень редко.
Вывод:
В этой статье вы прочитали как работает анимация css с использованием keyframes, в принципе всё не очень сложно, главное практиковаться, ну и скачайте код и проверьте как он работает.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 5,00
Загрузка...