Делаем простую анимацию через CSS transition

Делаем простую анимацию через CSS transition
Метки: / /

В этой статье я хочу рассказать как cделать с помощью CSS простую анимацию используя transition и вы поймёте, что анимация на CSS очень простая, также можно делать через «@keyframes» но это уже на мой взгляд сложнее, поэтому статью на эту тему я напишу в другой раз.

Также посмотрите эту статью: Анимация CSS через keyframes, без воды и максимально просто.

transition:

Это пожалуй самый простой способ, так как для него вам просто надо знать, хотя бы одну команду и всё.

Суть заключается в том, что когда вы будите изменять какой нибудь элемент через CSS, например используя :hover, то он будет изменятся плавно.

Для того что-бы нам это реализовать, будем использовать свойство transition, оно как-раз и настроит переход.

Простой пример:

HTML:

CSS:

Давайте теперь всё разберём по полочкам.

transition-property — устанавливает имя конкретного свойства, которое мы хотим изменить, то есть, при наведение мыши на «Привет transition» плавно изменятся будет только свойство font-size (Размер текста), а для свойства color (Цвет текста) не будет использоваться переход.

transition-duration — это свойство устанавливает время перехода, то есть, время анимации, значение устанавливается в секундах, если после числа стоит «s», например, у нас анимация будет длится одну секунду, также можно в миллисекундах, для этого используете «ms».

transition-timing-function — устанавливает, насколько быстро должно изменяться значение свойства, то есть, к примеру, у меня используется ease-in, это значит, что анимация будет медленно начинается, к концу ускоряется, подробнее об этом свойстве по этой ссылки.

transition-delay — устанавливает задержку перед анимацией, то есть, в нашем случае задержка будет 100 миллисекунд и только после этого переход сработает, также можно использовать секунду, логика тут токае же, как и с transition-duration, просто после числа пишите букву «s».

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

Для его использование, просто пишем transition, вот и готово.

HTML:

CSS:

Как видите всё очень просто, с начало идёт значение свойства transition-property, потом без запитых пишется значения свойств transition-duration, transition-timing-function, transition-delay, также надо сказать что не обязательно их все применять, достаточно только установить время и всё.

Ещё вы можете через запятую настроить для каждого свойства свой переход.

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

Вывод:

Как видите анимация на CSS очень простая, если использовать transition, в будущем я ещё напишу как это сделать через @keyframes, благодаря ему можно делать более сложную и интересную анимацию, а пока можете скачать код из статьи и посмотреть как всё работает.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую: