заявка на сайт
Дарья Кулага
Программист
Поделиться

Анимация на CSS3

597

В настоящее время активно развивается 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.


Наверх