Анимация на CSS3 (transition)

SUAREZ добавил 1401001345 в категорию Изучаем CSS/HTML
Как на большинстве веб-сайтов выглядит изменение цвета ссылки при наведении на неё мышкой? Цвет меняется сразу же, без плавного перехода. Конечно же, это никак не влияет на общий вид вашего сайта, или на его юзабилити, но представьте, как такая маленькая деталька, как присутствие плавного перехода, добавит вашему порталу капельку «жизни».

В этом материале мы рассмотрим такое свойство, как «transition». Этот метод на сегодняшний день кроссбраузерный, поэтому проблем в работе быть не должно.

CSS Transitions позволяют назначать изменения свойств CSS плавно в течение некоторого времени.

Начнем с самого примитивного примера - сделаем плавный переход фона у ссылки. Вот всем известная стандартная реализация изменения 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.
Теги: css, Transition, css3
Автор: SUAREZ
Источник: http://updatesite.ru
Зарегистрируйтесь или авторизуйтесь, чтобы добавлять комментарии, оценивать материалы и сохранять их в личном кабинете.
Вы не можете добавлять комментарии
Комментарии к этому материалу пока никто не оставлял
entry
Свернуть
Развернуть мини-чат
0