Начнем с самого примитивного примера - сделаем плавный переход фона у ссылки. Вот всем известная стандартная реализация изменения CSS-свойств при наведении мышкой на ссылку:
Код
a.example {
padding: 10px 5px;
background: #ff93c3;
color: #fff;
border-radius: 3px;
font-weight: bold;
}
a.example:hover {
background: #9e66f1;
color: #bbb;
}
Как вы можете увидеть на демонстрационной странице или просто догадаться сами, при наведении на ссылку, её фон поменяет цвет с розового на фиолетовый. Самая обычная ситуация.
Теперь сделаем плавную замену фона, с помощью CSS-свойства, о котором и идет речь в данном материале, transition.
Код
a.example {
padding: 10px 5px;
background: #ff93c3;
color: #fff;
border-radius: 3px;
font-weight: bold;
-webkit-transition-property: background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
}
a.example:hover {
background: #9e66f1;
color: #bbb;
}
Посмотрев на пример, вы увидите, что теперь фон плавно меняет цвет в течении промежутка времени, равного полсекунды! Аналогично всем свойствам стилей, присутствует возможность объединить все три строчки в одну:
Код
a.example {
padding: 10px 5px;
background: #ff93c3;
color: #fff;
border-radius: 3px;
font-weight: bold;
-webkit-transition: background 0.5s ease;
}
a.example:hover {
background: #9e66f1;
color: #bbb;
}
А сейчас добавим плавное переливание цвета текста:
Код
a.example {
padding: 10px 5px;
background: #ff93c3;
color: #fff;
border-radius: 3px;
font-weight: bold;
-webkit-transition: background 0.5s ease, color 1.2s ease;
}
a.example:hover {
background: #9e66f1;
color: #bbb;
}
При наведении на ссылки с классом «example» теперь будут плавно меняться цвет фона в течение 0.5 секунд, и цвет шрифта в течение 1.2 секунды. Если у нас изменение во времени у всех свойств имеет одинаковое время, то строчку с «transition» можно заменить на следующий код:
Код
-webkit-transition: all 0.5s ease;
Теперь эффект анимации будет применяться ко всем изменяющимся при событии свойствам в течение определенного периода времени (0.5) и с одинаковым эффектом (ease-эффект).
И напоследок мы добавим задержку анимации:
Код
a.example {
padding: 10px 5px;
background: #ff93c3;
color: #fff;
border-radius: 3px;
font-weight: bold;
-webkit-transition: all 0.5s ease;
-webkit-transition-delay: 0.5s;
}
a.example:hover {
background: #9e66f1;
color: #bbb;
}
Теперь эффект будет активирован через полсекунды после наведения мышки на ссылку. Применять данное свойство можно в самым различным свойствам - фону, цвету, размеру и т.п. В общем случае, эти свойства, которые можно выразить в пискелях, процентах и т.д. Помимо псевдокласса :hover, в качестве события мы так же может и другие селекторы, например :focus или :active.
Помимо эффекта «ease» можно использовать следующие свойства: linear, ease-in-out, ease-in, ease-out, cubic-bezier.
| 