evindor 11 янв 2011 в 16:25

CSS3 сейчас — transition

3 мин

263K

CSS*

+51

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

whynot 11 янв 2011 в 16:31

А для всех перечисленных браузеров демку было слабо написать? Да и принято, на мой взгляд, в демках не выносить css в отдельный файл, а писать прям инлайново — так удобнее читать.

evindor 11 янв 2011 в 16:33

Уже дописано для всех браузеров. Инлайн сейчас сделаю, спасибо за замечания.

naryl 16 янв 2011 в 19:18

Напишите тогда уж и для Хабра для всех браузеров. :) У наших многоуважаемых админов руки только до вебкита дошли.

agul 11 янв 2011 в 16:42

Спасибо за интересную статью!
Последний пример хотелось бы посмотреть без передергиваний после увеличения размеров (Chrome 8.0).

evindor 11 янв 2011 в 16:50

Готово! Было виновато позиционирование.

ArtyV 11 янв 2011 в 17:27

Это возможно сделать даже в IE, начиная с версии 5.5: msdn.microsoft.com/en-us/library/ms533099%28v=VS.85%29.aspx
Примеры можно глянуть у Стю Николса, например: www.cssplay.co.uk/ie/time-action.html

-1

betalb 11 янв 2011 в 18:24

CSS transitions — это решение, использующее только CSS. В случае с time потребуется дополнительная разметка в HTML или JScript код, который этот namespace зарегистрирует () и сгенерирует нужную разметку

ArtyV 11 янв 2011 в 21:57

И чем же эти способы принципиально различаются эти способы? В css необходимы дополнительные строчки, точно так же тут необходимы дополнительные строчки в html (тогда это выглядело правильным). И то и другое призвано сделать возможным создание эффектов без js

-1

betalb 11 янв 2011 в 22:13

Исключительно тем, что в html — семантика, а в CSS — представление

ArtyV 12 янв 2011 в 06:10

Не надо пожалуйста про эти словечки. Эти вещи просто делают своё дело, а как они это делают — вопрос десятый, главное — результат

-6

betalb 12 янв 2011 в 12:05

Если это будет крайне необходимо, то я воспользуюсь способом от MS.

но на данный момент мне приходилось использовать эти возможности только для progressive enhancement. Так что для меня вопрос «Как они это делают» — первый, а результат — второй

tzlom 11 янв 2011 в 18:45

ага, и работает это только в ИЕ
я уж молчу про то КАК это сделано

ArtyV 11 янв 2011 в 21:54

Это будет работать у трети всех посетителей среднестатистического сайта. У другой трети будут работать CSS transitions, у остальных не будет ничего. И в чём проблема?
Это сделано 10 лет назад, ещё тогда эти гениальные люди поняли, что это необходимо. До остальных дошло недавно. И вы смеете их в чём-то обвинять?

tzlom 11 янв 2011 в 22:08

я зашёл оперой хромом и фоксом (и ие для эталона) — нормальные браузеры показали фигню
я посмотрел в HTML код и увидел там логику анимирования воткнутую в HTML (который вообщем то язык разметки текста а не скриптовый)
специально для вас я открыл страницу в ИЕ 5.5 и увидел что анимации не работают (хотя позиционируются картинки правильно) а галереи по кликам ведут себя неправильно
анимации не работают пока не подгрузятся все картинки из галереи, то же самое про внешний вид до подгрузки

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

HTML и CSS это комплексная технология со своим особым подходом к решению задач, а не фиговина в которую можно абы как нахреначить «фишек» прикрываясь тем что мол на XML похоже, как это делает мелкософт

bolk 11 янв 2011 в 23:38

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

Эту технологию придумывали в Microsoft, Compaq и Macromedia. Сейчас она является стандартом и называется SMIL.

ArtyV 12 янв 2011 в 06:14

Конечно остальные браузеры показали фигню, потому что там код написан только для IE. Это всего лишь единичный пример, если задаться целью найти кроссбраузерный пример (а не написать гневный комментарий), то это очень просто сделать.

tibalt 14 янв 2011 в 15:04

а кому-то эту фигню придется еще и поддерживать после горе-верстальщика…

goodnews 11 янв 2011 в 18:14

Странно, но в 11й опере не работает

evindor 11 янв 2011 в 18:17

Ubuntu, Opera 11, работает. только очень странно, анимация проходит очень быстро, но некоторое смягчение перехода всё же заметно.

evindor 11 янв 2011 в 18:20

Извиняюсь, я накосячил. Сейчас работает, но только когда все свойства собраны в одно.

goodnews 11 янв 2011 в 18:29

Я заметил, что Вы добавили к стилям некоторые свойства, специфичные для оперы. А между тем, она мне показала, что не видит их. Третий пример заработал, а вот второй по-прежнему реагирует как простой :hover

goodnews 11 янв 2011 в 18:34

habrastorage.org/storage/4f8b2ae6/fe42f492/bca00474/7344ae93.png

evindor 11 янв 2011 в 18:38

habrahabr.ru/blogs/css/111658/#comment_3563937

goodnews 11 янв 2011 в 18:44

Понял. Попробовал сделать так для второго примера

-o-transition: background 0.5s ease;

Видимо для фона оно всё равно не работает

tzlom 11 янв 2011 в 18:50

потому что надо прописывать background-color а не обобщённое свойство

goodnews 11 янв 2011 в 18:55

Действительно, так заработало, спасибо. Я как-то не догадался сразу…

evindor 11 янв 2011 в 19:35

Спасибо, пофиксил.

mkal 11 янв 2011 в 18:21

У меня заработало, но не с первого раза.

evindor 11 янв 2011 в 18:28

Это я перезалил файл :)

vadimus 11 янв 2011 в 20:16

Неожиданно, но факт:

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

Вот здесь можно взглянуть на пример. Я специально поместил два блока один над другим. В одном блоке бекграунд задан картинкой, в другом цветом. Стили записаны абсолютно идентично. Фотография плавно не перетекает, цвет перетекает. Правда, проверил только в хроме.

evindor 11 янв 2011 в 20:33

Действительно, попробовал различными способами — не работает :(

lahmatiy 11 янв 2011 в 21:45

-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, с помощью которого можно задать свою функцию изменения значения.

evindor 18 янв 2011 в 12:36

Большое спасибо за правки, внёс в статью.

Operatino 12 июл 2011 в 01:10

Пока что в вебките и ФФ не робатают transitions на generated content, проверял с :before, :after.

НЛО прилетело и опубликовало эту надпись здесь

PerFORmeRofDeS 21 ноя 2012 в 04:58

день убил на эксперементы с этим, потом только нагуглил ваш ответ))

azproduction 11 янв 2011 в 22:16

Есть старая статья Резига, критикующая нынешнее положение дел с 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/

azproduction 11 янв 2011 в 22:42

Мне одному кажется, что из-за transition-timing-function: ease блок в конце прыгает? Красоты ради, думаю, лучше linear.
Если кому интересно покрутить transition-timing-function: cubic-bezier вот редактор

fenrillium 12 янв 2011 в 09:34

Блок в конце прыгает из-за того, что размер шрифта при наведении выставлен 35px, а изначальный — 30px. Вам не кажется, он прыгает, но независимо от transition-timing-function.

evindor 12 янв 2011 в 12:31

Мне кажется, azproduction имел в виду подергивание в конце анимации при наведении. Я тоже это заметил, и причина — всё еще кривая реализация в любых браузерах :) Достаточно посмотреть на ужасающий transform при повороте текста, когда буквы весело скачут. Но всё впереди, и я искренне надеюсь, что настанет светлое время поддержки CSS3.

fenrillium 12 янв 2011 в 13:47

Ох, ошибочка вышла.
Поддержка действительно не самая лучшая, но в будущем все изменится, а пока глючных вещей можно избегать.
В любом случае я за то, чтоб в CSS вынесли простенькие анимации и градиенты — потому как не всегда есть возможность пользовать javascript (в соображениях безопасности). Как говорится: подождем — увидим.

sogologo 3 апр 2012 в 07:08

Для уверенности ставлю для всех браузеров вот так

-webkit-transition: свойство 200ms linear;

-moz-transition: свойство 200ms linear;

-o-transition: свойство 200ms linear;

transition: свойство 200ms linear;