Свойство transition в CSS3
Transition в переводе с английского означает переход. Я постараюсь на простых примерах показать, как можно использовать данное свойство. А вы для себя решите где бы вы могли его использовать уже сейчас.
А начну я пожалуй с плавного изменения фона для ссылки
a.light{
padding: 5px 10px;
background: #7f7f7f;
color: #ffffff;
text-decoration:none;
-webkit-transition-property: background;
-moz-transition-property: background;
-ms-transition-property: background;
-o-transition-property: background;
transition-property: background;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-ms-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
}
a.light:hover {
background: #ffffff;
color: #000000;
}
Как видно из примера наша ссылка меняет фон при наведении курсора мышки в течении полсекунды. Код получился громоздкий и неудобный, но как и все свойства в CSS в одно transition:
a.light{
padding: 5px 10px;
background: #7f7f7f;
color: #ffffff;
text-decoration:none;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
transition: background 0.5s ease;
}
a.light:hover {
background: #ffffff;
color: #000000;
}
Так то лучше. А теперь давайте добавим плавный переход изменения цвета нашей ссылки:
a.light{
padding: 5px 10px;
background: #7f7f7f;
color: #ffffff;
text-decoration:none;
-webkit-transition: background 0.5s ease, color 0.4s ease;
-moz-transition: background 0.5s ease, color 0.4s ease;
-ms-transition: background 0.5s ease, color 0.4s ease;
-o-transition: background 0.5s ease, color 0.4s ease;
transition: background 0.5s ease, color 0.4s ease;
}
a.light:hover {
background: #ffffff;
color: #000000;
}
Также можно использовать свойство transition-delay, которое предназначено для задержки перехода. Как его использовать я писать не буду, вы думаю и сами уже догадались. Если нет то попробуйте его применить, дам лишь подсказку что время задержки выставляется также, как и в свойстве transition-duration.
Вот пожалуй пока и всё, что нужно для первого раза!