transition в CSS3

12
Май
2010

transition в CSS3 / Анимация и переход CSS3

Привет! Ну что, продолжим дальше изучать новые свойства третьей версии CSS? Сегодня предлагаю рассмотреть такое свойство, как "transition", это своего рода анимация/переход, которую можно применить к любому свойству CSS.

Demo transition CSS3

Итак, свойства:

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

Download (скачать) transition CSS3

А Вам как?

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

Подписаться на RSSВы можете подписаться на RSS или на E-mail рассылку:

Оставить комментарий с помощью формы ВКонтакте

Комментариев (23) к “transition в CSS3”

  1. Никита пишет:

    По какой-то причине применение свойств к нескольким элементам по вашему рецепту у меня не вышло.
    У вас в коде к контейнеру 6 написано:
    transition:width, height, background, opacity, font-size 1s linear;
    У меня так выполнялось только последнее свойство – font-size.
    Все начало работать, когда я заменил все элементы на слово all:
    transition:all 1s linear;

    Спасибо вам за ваш блог! Очень полезный! :)

  2. Guest пишет:

    Такие вещи, как “-moz” и “-o” – называются не “хаки”, а “префиксы”. Прежде чем писать подобные, с позволения сказать, “статьи”, следует для начала разобраться в терминологии, а то потом такие вот “писатели” и начинают выдавать конкатенацию за инкапсуляцию.

  3. Serzhei пишет:

    Дождались, опера реализовала плюшку