В этой статье я хочу рассказать как cделать с помощью CSS простую анимацию используя transition и вы поймёте, что анимация на CSS очень простая, также можно делать через «@keyframes» но это уже на мой взгляд сложнее, поэтому статью на эту тему я напишу в другой раз.
Также посмотрите эту статью: Анимация CSS через keyframes, без воды и максимально просто.
transition:
Это пожалуй самый простой способ, так как для него вам просто надо знать, хотя бы одну команду и всё.
Суть заключается в том, что когда вы будите изменять какой нибудь элемент через CSS, например используя :hover
, то он будет изменятся плавно.
Для того что-бы нам это реализовать, будем использовать свойство transition
, оно как-раз и настроит переход.
Простой пример:
HTML:
1 2 3 4 | <div class="first"> <h2>Пример - 1:</h2> <p>Привет transition</p> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 | .first p { transition-property: font-size; transition-duration: 500ms; transition-timing-function: ease-in; transition-delay: 100ms; } .first p:hover { color: red; font-size: 30px; } |
Давайте теперь всё разберём по полочкам.
transition-property — устанавливает имя конкретного свойства, которое мы хотим изменить, то есть, при наведение мыши на «Привет transition» плавно изменятся будет только свойство font-size (Размер текста), а для свойства color (Цвет текста) не будет использоваться переход.
transition-duration — это свойство устанавливает время перехода, то есть, время анимации, значение устанавливается в секундах, если после числа стоит «s», например, у нас анимация будет длится одну секунду, также можно в миллисекундах, для этого используете «ms».
transition-timing-function — устанавливает, насколько быстро должно изменяться значение свойства, то есть, к примеру, у меня используется ease-in
, это значит, что анимация будет медленно начинается, к концу ускоряется, подробнее об этом свойстве по этой ссылки.
transition-delay — устанавливает задержку перед анимацией, то есть, в нашем случае задержка будет 100 миллисекунд и только после этого переход сработает, также можно использовать секунду, логика тут токае же, как и с transition-duration, просто после числа пишите букву «s».
Это все свойства которые есть для работы с переходами, но каждый раз писать каждое свойство, на мой взгляд не очень приятно, поэтому есть одно универсальное свойство.
Для его использование, просто пишем transition
, вот и готово.
HTML:
1 2 3 4 | <div class="second"> <h2>Пример - 2:</h2> <p>Привет transition</p> </div> |
CSS:
1 2 3 4 5 6 7 8 | .second p { transition: color 1s ease-in 300ms; } .second p:hover { color: green; font-size: 30px; } |
Как видите всё очень просто, с начало идёт значение свойства transition-property, потом без запитых пишется значения свойств transition-duration, transition-timing-function, transition-delay, также надо сказать что не обязательно их все применять, достаточно только установить время и всё.
Ещё вы можете через запятую настроить для каждого свойства свой переход.
1 2 3 4 5 6 7 8 9 | .third p { transition: 250ms 250ms, font-size 500ms, color 1s ease-out 500ms; } .third p:hover { color: blue; font-size: 30px; background-color: red; } |
Как можете заметить, в начале у нас не задан переход для конкретного свойства, он будет работать для всех тех свойств, у которых не задан, обязательно пишите обшей переход в начале, и потом уже для конкретных.
Вывод:
Как видите анимация на CSS очень простая, если использовать transition, в будущем я ещё напишу как это сделать через @keyframes
, благодаря ему можно делать более сложную и интересную анимацию, а пока можете скачать код из статьи и посмотреть как всё работает.