CSS Transitions позволяют назначать изменения свойств CSS плавно и в течение некоторого времени.
1. Чего добиваемся: [пример]. Наводить на текст справа
Как всегда напоминаю о том, что не все браузеры поддерживают CSS3 (конкретнее: поддерживают - Chrome, Safari, Opera 10.5+, Firefox 4+), а потому не стоит злоупотреблять им, пихая во все впихиваемое. И не забывайте про префиксы!
-moz-
-webkit-
-khtml-
-o-
2.
Давайте начнем с самого простого примера — добавим плавный переход фона ссылки. (второе окошечко в примере)
element {
padding: 5px 10px;
background: #69f;
color: #000;
}
element: hover {
background: #33f;
color: #fff;
}
При наведении мышки на ссылку фон поменяет свой цвет со светло-синего на тёмно-синий, а цвет шрифта — с черного на белый. Обычная ситуация.
3.
Теперь добавим плавную смену фона, используя CSS transitions:
element {
padding: 5px 10px;
background: #69f;
color: #000;
-webkit-transition-property: background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
}
element: hover {
background: #33f;
color: #fff;
}
Теперь наш фон плавно меняет цвет в течение полусекунды! Как и с прочими свойствами CSS, мы можем объединить все transition-свойства в одно:
element {
padding: 5px 10px;
background: #69f;
color: #000;
-webkit-transition: background 0.5s ease;
}
element: hover {
background: #33f;
color: #fff;
}
Теперь добавим плавное изменение цвета шрифта:
element {
padding: 5px 10px;
background: #69f;
color: #000;
-webkit-transition: background 0.5s ease, color 0.3s ease;
}
element: hover {
background: #33f;
color: #fff;
}
Данный код при наведении мышки будет плавно менять цвет фона в течение полусекунды и цвет шрифта в течение 0.3 секунд. Если же нам нужны одинаковые свойства для всех элементов, мы можем заменить
-webkit-transition: background 0.5s ease;
-webkit-transition: color 0.3s ease;
на
-webkit-transition: all 0.5s ease;
Теперь Transition-эффект будет применяться ко всем изменяющимся при событии свойствам и с одинаковыми параметрами — 0.5 секунд, ease-эффект.
Так же, мы можем добавить задержку для эффекта:
element {
padding: 5px 10px;
background: #69f;
color: #000;
-webkit-transition: all 0.5s ease;
-webkit-transition-delay: 0.5s;
}
element: hover {
background: #33f;
color: #fff;
}
Теперь наша анимация будет работать через полсекунды после наведения мышки.
Применять свойство transition можно к чему угодно — фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. В качестве события мы так же можем использовать псевдоклассы :focus и :active. Вообще — использовать transition можно с любыми селекторами.
transition-property | Свойство, к которому применяем анимацию | Практически любое свойство CSS: color, background, width, font-size и т.д. |
transition-duration | Длительность анимации | Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д. |
transition-timing-function | Временная функция, используемая для анимации | ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier |
transition-delay | Задержка анимации | Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д. |
4. Итоговый код
Например, для смены цвета ссылок в меню навигации:
#pun-navlinks a {
color: #EFEFEF;
border-bottom: 0px none #000;
text-decoration: none;
-webkit-transition: color 0.5s ease;
-khtml-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
}#pun-navlinks a:hover, #pun-navlinks a:focus {
color: #20bb20;
font-weight: normal;
font-style: normal;
border-bottom: 0px none #000;
text-decoration: underline;
}
Теоретически - это свойство можно применить к любому элементу, не только к ссылкам. Дерзайте!
Теги: css, дизайн, стиль