Привет! Ну что, продолжим дальше изучать новые свойства третьей версии CSS? Сегодня предлагаю рассмотреть такое свойство, как "transition", это своего рода анимация/переход, которую можно применить к любому свойству CSS.
Итак, свойства:
transition-property - указываем свойство, которое будем анимировать (можно указать несколько через запятую);
transition-duration - указываем время анимации (в секундах или миллисекундах);
transition-timing-function - указываем тип изменения;или же можно все правила указать в одном свойстве:
transition - вписываем через пробел все правила.
Чтобы изменить цвет фона контейнера при наведении, пишем следующее:
.mycontainer { background:#cccccc; -webkit-transition-property:background; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; } .mycontainer:hover { background:#сс9999; }
или упрощенная запись:
.mycontainer { background:#cccccc; -webkit-transition:background 1s linear; } .mycontainer:hover { background:#сс9999; }
Мы указали, что при наведении курсора на блок "mycontainer", будет изменятся цвета фона, время перехода с цвета на цвет - 1 секунда и тип изменения - линейная функция - "linear".
"transition-timing-function" имеет множество значений:
- default
- linear
- ease-in
- ease-out
- ease-in-out
- cubic-bezier (x1, y1, x2, y2)
Подробная информация на w3.org.
Такие же действия можно произвести со множеством свойств, таких как: изменение размеров блока, тени для блока/текста, непрозрачность, размеры шрифта и многих других. Более наглядно можно посмотреть в DEMO.
Что меня немного огорчило, это то, что поддерживают это свойство только браузеры на движке WebKit. Но, надеюсь, что скоро его смогут понимать и другие популярные браузеры.
По-моему, свойство "transition" - очень удобная штуковина, которая может сделать красивые плавные переходы между элементами в веб-дизайне.
А Вам как?
З.Ы. Рекомендую почитать интересный обзор сервиса по поиску дубликатов изображений в сети.
По какой-то причине применение свойств к нескольким элементам по вашему рецепту у меня не вышло.
У вас в коде к контейнеру 6 написано:
transition:width, height, background, opacity, font-size 1s linear;
У меня так выполнялось только последнее свойство – font-size.
Все начало работать, когда я заменил все элементы на слово all:
transition:all 1s linear;
Спасибо вам за ваш блог! Очень полезный!
Спасибо! А каким браузером проверяли?
Такие вещи, как “-moz” и “-o” – называются не “хаки”, а “префиксы”. Прежде чем писать подобные, с позволения сказать, “статьи”, следует для начала разобраться в терминологии, а то потом такие вот “писатели” и начинают выдавать конкатенацию за инкапсуляцию.
Понял, спасибо за разъяснение
Дождались, опера реализовала плюшку