Пользователь
0,0
рейтинг
11 января 2011 в 16:25

Разработка → CSS3 сейчас — transition

CSS*
CSS3 и HTML5 развиваются всё быстрее и быстрее, браузеры начинают поддерживать всё больше новых фишек и плюшек. В связи с этим, мне хотелось бы заглянуть в наш будущий рай верстальщиков и сделать цикл обзорных статей по новым плюшкам и фишкам этих технологий.
В этом цикле мне хотелось бы рассмотреть такие свойства CSS3, как transition, animate, opacity и модель rgba().

Использование CSS3.


Часто можно услышать от многих веб-дизайнеров слова «Я уже не могу дождаться, когда же можно будет использовать CSS3...». А между тем, использовать его можно уже сегодня. Да, использование CSS3 для критичных моментов сайта сейчас невозможно. Но использовать его для добавления мелких, некритичных для проекта деталей вполне реально, можно и нужно.


Пример: На вашем сайте прекрасно смотрится изменение цвета ссылки в меню при наведении мышкой. Цвет изменяется резко, без плавного перехода, но это никак не влияет на общий вид сайта, его юзабилити. Зато присутствие плавного перехода цвета может послужить именно той маленькой деталькой, которая добавит вашему сайту немного «жизни».

В данной статье мы рассмотрим CSS-свойство transition.
Все примеры приведены для движка webkit. Чуть ниже мы рассмотрим кроссбраузерность этих методов.

Transition


W3C даёт следующее определение transitions:
CSS Transitions allow property changes in CSS values to occur
smoothly over a specified duration.

CSS Transitions позволяют назначать изменения свойств CSS плавно и в течение некоторого времени.

Давайте начнем с самого простого примера — добавим плавный переход фона ссылки.
Классическая реализация:
a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

При наведении мышки на ссылку фон поменяет свой цвет со светло-синего на тёмно-синий, а цвет шрифта — с черного на белый. Обычная ситуация.
Теперь добавим плавную смену фона, используя CSS transitions:
a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition-property: background;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

Теперь наш фон плавно меняет цвет в течение полусекунды! Как и с прочими свойствами CSS, мы можем объединить все transition-свойства в одно:
a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition: background 0.5s ease;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

Теперь добавим плавное изменение цвета шрифта:
a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition: background 0.5s ease, color 0.3s ease;
	}
a.foo: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-эффект.

Так же, мы можем добавить задержку для эффекта:
a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition: all 0.5s ease;
	-webkit-transition-delay: 0.5s;
	}
a.foo: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 — одна минута и т.д.

Браузеры


Chrome, Safari, Opera 10.5+, Firefox 4+
В тексте статьи использовались правила с префиксом только для WebKit-браузеров. Не забывайте добавлять в ваших проектах префиксы вендоров -moz- и -o-. На страничке-примере можно подсмотреть кроссбраузерный код (без IE, само собой).

Если статья найдет своих заинтересованных читателей, в следующем посте мы рассмотрим keyframe-анимацию, свойство opacity и модель rgba(). Спасибо за внимание!

P.S. Спасибо lahmatiy за поправки в комментариях.
Заречнев Арсений @evindor
карма
41,0
рейтинг 0,0
Пользователь
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (45)

  • +1
    А для всех перечисленных браузеров демку было слабо написать? Да и принято, на мой взгляд, в демках не выносить css в отдельный файл, а писать прям инлайново — так удобнее читать.
    • +3
      Уже дописано для всех браузеров. Инлайн сейчас сделаю, спасибо за замечания.
      • +1
        Напишите тогда уж и для Хабра для всех браузеров. :) У наших многоуважаемых админов руки только до вебкита дошли.
  • 0
    Спасибо за интересную статью!
    Последний пример хотелось бы посмотреть без передергиваний после увеличения размеров (Chrome 8.0).
    • +1
      Готово! Было виновато позиционирование.
  • –1
    Это возможно сделать даже в IE, начиная с версии 5.5: msdn.microsoft.com/en-us/library/ms533099%28v=VS.85%29.aspx
    Примеры можно глянуть у Стю Николса, например: www.cssplay.co.uk/ie/time-action.html
    • 0
      CSS transitions — это решение, использующее только CSS. В случае с time потребуется дополнительная разметка в HTML или JScript код, который этот namespace зарегистрирует () и сгенерирует нужную разметку
      • –1
        И чем же эти способы принципиально различаются эти способы? В css необходимы дополнительные строчки, точно так же тут необходимы дополнительные строчки в html (тогда это выглядело правильным). И то и другое призвано сделать возможным создание эффектов без js
        • +6
          Исключительно тем, что в html — семантика, а в CSS — представление
          • –6
            Не надо пожалуйста про эти словечки. Эти вещи просто делают своё дело, а как они это делают — вопрос десятый, главное — результат
            • +3
              Если это будет крайне необходимо, то я воспользуюсь способом от MS.

              но на данный момент мне приходилось использовать эти возможности только для progressive enhancement. Так что для меня вопрос «Как они это делают» — первый, а результат — второй
    • +1
      ага, и работает это только в ИЕ
      я уж молчу про то КАК это сделано
      • +1
        Это будет работать у трети всех посетителей среднестатистического сайта. У другой трети будут работать CSS transitions, у остальных не будет ничего. И в чём проблема?
        Это сделано 10 лет назад, ещё тогда эти гениальные люди поняли, что это необходимо. До остальных дошло недавно. И вы смеете их в чём-то обвинять?
        • +2
          я зашёл оперой хромом и фоксом (и ие для эталона) — нормальные браузеры показали фигню
          я посмотрел в HTML код и увидел там логику анимирования воткнутую в HTML (который вообщем то язык разметки текста а не скриптовый)
          специально для вас я открыл страницу в ИЕ 5.5 и увидел что анимации не работают (хотя позиционируются картинки правильно) а галереи по кликам ведут себя неправильно
          анимации не работают пока не подгрузятся все картинки из галереи, то же самое про внешний вид до подгрузки

          я не знаю какие люди придумывали эту «технологию», но думать в процессе этого действия они явно забыли

          HTML и CSS это комплексная технология со своим особым подходом к решению задач, а не фиговина в которую можно абы как нахреначить «фишек» прикрываясь тем что мол на XML похоже, как это делает мелкософт
          • 0
            я не знаю какие люди придумывали эту «технологию», но думать в процессе этого действия они явно забыли
            Эту технологию придумывали в Microsoft, Compaq и Macromedia. Сейчас она является стандартом и называется SMIL.
          • 0
            Конечно остальные браузеры показали фигню, потому что там код написан только для IE. Это всего лишь единичный пример, если задаться целью найти кроссбраузерный пример (а не написать гневный комментарий), то это очень просто сделать.
          • 0
            а кому-то эту фигню придется еще и поддерживать после горе-верстальщика…
  • 0
    Странно, но в 11й опере не работает
    • +3
      Ubuntu, Opera 11, работает. только очень странно, анимация проходит очень быстро, но некоторое смягчение перехода всё же заметно.
    • +1
      Извиняюсь, я накосячил. Сейчас работает, но только когда все свойства собраны в одно.
      • 0
        Я заметил, что Вы добавили к стилям некоторые свойства, специфичные для оперы. А между тем, она мне показала, что не видит их. Третий пример заработал, а вот второй по-прежнему реагирует как простой :hover
          • +1
            • 0
              Понял. Попробовал сделать так для второго примера

              -o-transition: background 0.5s ease;

              Видимо для фона оно всё равно не работает
              • +1
                потому что надо прописывать background-color а не обобщённое свойство
                • 0
                  Действительно, так заработало, спасибо. Я как-то не догадался сразу…
                • +1
                  Спасибо, пофиксил.
    • +1
      У меня заработало, но не с первого раза.
      • +1
        Это я перезалил файл :)
  • 0
    Неожиданно, но факт:

    не срабатывает на свойство background-image.

    Вот здесь можно взглянуть на пример. Я специально поместил два блока один над другим. В одном блоке бекграунд задан картинкой, в другом цветом. Стили записаны абсолютно идентично. Фотография плавно не перетекает, цвет перетекает. Правда, проверил только в хроме.
    • +1
      Действительно, попробовал различными способами — не работает :(
  • +7
    -webkit-transition: background 0.5s ease;
    -webkit-transition: color 0.3s ease;

    Данный код при наведении мышки будет плавно менять цвет фона в течение полусекунды и цвет шрифта в течение 0.3 секунд.

    При наведении будет меняться только цвет текста, так как вторая строка отменяет первую. Чтобы заработало как задумывалось нужно указывать значения через запятую:
    -webkit-transition: background 0.5s ease, color 0.3s ease;
    


    Применять свойство transition можно к чему угодно — фону, цвету, длине, размеру шрифта и т.д.

    Можно применять не ко всем свойствам, а к определенному набору, в основном это свойства задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex etc) или в процентах. Подробнее можно почитать в черновике CSS Transitions Module Level 3.

    В качестве события мы так же можем использовать псевдоклассы :focus и :active.

    Использовать свойство можно с любыми селекторами, в том числе и с любыми псевдо классами. Помимо этого можно применять свойство к генерируемому контенту, а точнее к псевдо элементам :before и :after.
    В черновике так и написано:

    Applies to: all elements, :before and :after pseudo elements


    transition-timing-function Временная функция, исопльзуемая для анимации ease, linear, ease-in-out, ease-in, ease-out

    Забыли про значение cubic-bezier, с помощью которого можно задать свою функцию изменения значения.
    • 0
      Большое спасибо за правки, внёс в статью.
    • 0
      Пока что в вебките и ФФ не робатают transitions на generated content, проверял с :before, :after.
      • 0
        Подтверждаю. Мучался, пока не увидел этот комментарий.
      • 0
        день убил на эксперементы с этим, потом только нагуглил ваш ответ))
  • +5
    Есть старая статья Резига, критикующая нынешнее положение дел с CSS3 Transition и объясняет почему до сих пор не написали CSS3 Transition адаптер для jQuery.animate
    Основные моменты критики:
    1. Невозможно остановить анимацию, которая исполняется
    2. Невозможно получить текущий статус анимации (то как она проходит) — существует только Event, говорящий о том, что анимация с этим элементом завершена.
    el.addEventListener("transitionend", updateTransition, true);
    3. Нет способа синхронизации нескольких анимаций
    4. Нет способа задания своих easing функций (cubic-bezier ему мало) он имеет в виду нет хорошей поддержки @keyframes
    Хотя качество(плавность, меньшая нагрузка на ЦП) анимаци, которое предоставляет CSS3 Transition на много лучше чем текущий jQuery.animate stress test
    Статья: ejohn.org/blog/css-animations-and-javascript/
  • +2
    Мне одному кажется, что из-за transition-timing-function: ease блок в конце прыгает? Красоты ради, думаю, лучше linear.
    Если кому интересно покрутить transition-timing-function: cubic-bezier вот редактор
    • 0
      Блок в конце прыгает из-за того, что размер шрифта при наведении выставлен 35px, а изначальный — 30px. Вам не кажется, он прыгает, но независимо от transition-timing-function.
      • +1
        Мне кажется, azproduction имел в виду подергивание в конце анимации при наведении. Я тоже это заметил, и причина — всё еще кривая реализация в любых браузерах :) Достаточно посмотреть на ужасающий transform при повороте текста, когда буквы весело скачут. Но всё впереди, и я искренне надеюсь, что настанет светлое время поддержки CSS3.
        • 0
          Ох, ошибочка вышла.
          Поддержка действительно не самая лучшая, но в будущем все изменится, а пока глючных вещей можно избегать.
          В любом случае я за то, чтоб в CSS вынесли простенькие анимации и градиенты — потому как не всегда есть возможность пользовать javascript (в соображениях безопасности). Как говорится: подождем — увидим.
  • 0
    Для уверенности ставлю для всех браузеров вот так

    -webkit-transition: свойство 200ms linear;
    -moz-transition: свойство 200ms linear;
    -o-transition: свойство 200ms linear;
    transition: свойство 200ms linear;
  • 0
    Ссылки на примеры не работают
  • 0
    Страница с примером вирусная с всплывающими окнами, удалите!
    • 0
      Спасибо, убрал. Давно дело было, видимо нехорошие ребята купили домен.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.