Анимация на CSS3

Время на прочтение: 1 минута
6 марта 2024

В настоящее время активно развивается CSS3, и все больше его свойств поддерживаются современными браузерами.
Сегодня мы поговорим о том, как с помощью CSS3 создать анимацию, для этого нам понадобиться свойство transition.
Рассмотрим простой пример:
a {
    background: #000;
    color: #fff;
    transition: all 0.5s ease;
    }
a:hover {
    background: #fff;
    color: #000;
    }
 
Данный код при наведении мышки будет изменять background и color плавно в течении полусекунды.
Если нам необходимо выполнять анимацию для каждого свойтсва в отдельности можно поступить так:
a {
background: #000;
      color: #fff;
transition: background 0.5s ease;
transition: color 0.3s ease;
}
a:hover {
    background: #fff;
    color: #000;
 }
В данном примере время выполнения анимации для каждого свойства указано отдельно. Так же можно добавить задержку анимации с помощью transition-delay: 0.5s; С помощью данного свойства можно анимировать практически любые свойства CSS.