Привет! Ну что, продолжим дальше изучать новые свойства третьей версии CSS? Сегодня предлагаю рассмотреть такое свойство, как “transition“, это своего рода анимация/переход, которую можно применить к любому свойству CSS.
Итак, свойства:
transition-property – указываем свойство, которое будем анимировать (можно указать несколько через запятую);
transition-duration – указываем время анимации (в секундах или миллисекундах);
transition-timing-function – указываем тип изменения;или же можно все правила указать в одном свойстве:
transition – вписываем через пробел все правила.
Чтобы изменить цвет фона контейнера при наведении, пишем следующее:
1 2 3 4 5 6 7 8 9 | .mycontainer {
background:#cccccc;
-webkit-transition-property:background;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
}
.mycontainer:hover {
background:#сс9999;
} |
или упрощенная запись:
1 2 3 4 5 6 7 | .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” – очень удобная штуковина, которая может сделать красивые плавные переходы между элементами в веб-дизайне.
А Вам как?
З.Ы. Рекомендую почитать интересный обзор сервиса по поиску дубликатов изображений в сети.
ФИ: Михайленко Олег.
С каждым твоим постом, мне CSS3 всё больше нравиться.
гг)))) а мне тем более))))
Спасибо. CSS3 новые возможности… Классно. Подпишусь на Ваш блог. ИНтересные посты пишите.
Интересная штука! Пока почти ничего не понял
Посмотри на ссылку на w3.org)))) Может поймешь то описание))))
И что именно непонятно?))
круто и обидно, терь все сайты будут с фичами разными, раньше были ток у того кто шарисля немного в джава скрипте
мало нам ФШ ЦС% еще и ЦСС3 в придачу 
гг) скоро домохозяйки будут круче нас делать нашу работу)))) А все из-за чего? Из-за прогресса))))
[...] This post was mentioned on Twitter by Anna Volkova, Джебокс, DJ Hennion, Jason design, Виктор and others. Виктор said: RT @Legich transition в CSS3 http://bit.ly/9t2rbh [...]
Насколько все проще в CSS 3. То, что раньше без JS нельзя было сделать, теперь можно задать парой свойств. Осталось дождаться, когда все браузеры будут это поддерживать
[...] анимации, ёмаё!) И в этом нам поможет свойство “transition“, о котором я недавно [...]
Спасибо Legich, реально помог!
Не за что
Рад, что помог! 