Привет! Ну что, продолжим дальше изучать новые свойства третьей версии 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" - очень удобная штуковина, которая может сделать красивые плавные переходы между элементами в веб-дизайне.

А Вам как?

З.Ы. Рекомендую почитать интересный обзор сервиса по поиску дубликатов изображений в сети.