Плавные переходы, которые стали возможны в версии CSS3, добавили кучу возможностей для веб-разработчиков, которые раньше можно было осуществить только на JavaScript. В этой статье давайте разбираться, как легко реализовать на css плавное изменение цвета.
Возможности свойства transition
И в этом нам поможет замечательное CSS3-свойство – transition. Для примера создадим в html обычный блочный элемент, покрасим его в произвольный цвет (например, желтый) и зададим определенные размеры. Что теперь нужно сделать, чтобы реализовать с помощью css плавное изменение цвета у этого блока?
Во-первых, нужно дописать в его стили еще одно свойство. Оно никак не повлияет на внешний вид блока, но обеспечит нужное нам плавное изменение.
transition: 1s;
Для примера я ставлю 1 секунду, но можно поставить и больше, и меньше. Также задать время можно в миллисекундах. Во-вторых, нужно прописать стили для этого блока при наведении на него курсора мыши, чтобы его цвет менялся на другой. Например:
Block{
Background: red
}
Итак, если все сделано правильно, то при наведении на элемент курсора его цвет изменится с желтого на красный и это произойдет не резко, а плавно.
Возможно, вам нужно плавно изменить цвет не после наведения курсора, а после клика мышкой по блоку или другого события. Что ж, тут возможностями одного css не справится, придется подключать javascript-сценарии. Но это тема для отдельной статьи, потому что сегодня я хотел рассказать именно о плавном изменении цвета на css.
Соответственно, таким же образом можно изменить цвет не только фона, но и текста, декоративных элементов и т.д. Вообще, если вы поняли суть свойства transition, то сможете изменять не только цвет, но и другие параметры внешнего вида, наблюдая за их плавным изменением. Так можно добиться достаточно красивых эффектов.
Поддержка в браузерах
Свойство transition поддерживается в современных браузерах, но старые веб-обозреватели о нем ничего не знают (IE 6-9, старые версии Opera, Mozilla). Поэтому если вам нужна кроссбраузерность сайта, то придется идти на дополнительные меры. В любом случае, можно просто отказаться от поддержки свойства в старых браузерах, пусть пользователи обновляют свое ПО 