Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 45
А для всех перечисленных браузеров демку было слабо написать? Да и принято, на мой взгляд, в демках не выносить css в отдельный файл, а писать прям инлайново — так удобнее читать.
Спасибо за интересную статью!
Последний пример хотелось бы посмотреть без передергиваний после увеличения размеров (Chrome 8.0).
Последний пример хотелось бы посмотреть без передергиваний после увеличения размеров (Chrome 8.0).
Это возможно сделать даже в IE, начиная с версии 5.5: msdn.microsoft.com/en-us/library/ms533099%28v=VS.85%29.aspx
Примеры можно глянуть у Стю Николса, например: www.cssplay.co.uk/ie/time-action.html
Примеры можно глянуть у Стю Николса, например: www.cssplay.co.uk/ie/time-action.html
CSS transitions — это решение, использующее только CSS. В случае с time потребуется дополнительная разметка в HTML или JScript код, который этот namespace зарегистрирует () и сгенерирует нужную разметку
И чем же эти способы принципиально различаются эти способы? В css необходимы дополнительные строчки, точно так же тут необходимы дополнительные строчки в html (тогда это выглядело правильным). И то и другое призвано сделать возможным создание эффектов без js
ага, и работает это только в ИЕ
я уж молчу про то КАК это сделано
я уж молчу про то КАК это сделано
Это будет работать у трети всех посетителей среднестатистического сайта. У другой трети будут работать CSS transitions, у остальных не будет ничего. И в чём проблема?
Это сделано 10 лет назад, ещё тогда эти гениальные люди поняли, что это необходимо. До остальных дошло недавно. И вы смеете их в чём-то обвинять?
Это сделано 10 лет назад, ещё тогда эти гениальные люди поняли, что это необходимо. До остальных дошло недавно. И вы смеете их в чём-то обвинять?
я зашёл оперой хромом и фоксом (и ие для эталона) — нормальные браузеры показали фигню
я посмотрел в HTML код и увидел там логику анимирования воткнутую в HTML (который вообщем то язык разметки текста а не скриптовый)
специально для вас я открыл страницу в ИЕ 5.5 и увидел что анимации не работают (хотя позиционируются картинки правильно) а галереи по кликам ведут себя неправильно
анимации не работают пока не подгрузятся все картинки из галереи, то же самое про внешний вид до подгрузки
я не знаю какие люди придумывали эту «технологию», но думать в процессе этого действия они явно забыли
HTML и CSS это комплексная технология со своим особым подходом к решению задач, а не фиговина в которую можно абы как нахреначить «фишек» прикрываясь тем что мол на XML похоже, как это делает мелкософт
я посмотрел в HTML код и увидел там логику анимирования воткнутую в HTML (который вообщем то язык разметки текста а не скриптовый)
специально для вас я открыл страницу в ИЕ 5.5 и увидел что анимации не работают (хотя позиционируются картинки правильно) а галереи по кликам ведут себя неправильно
анимации не работают пока не подгрузятся все картинки из галереи, то же самое про внешний вид до подгрузки
я не знаю какие люди придумывали эту «технологию», но думать в процессе этого действия они явно забыли
HTML и CSS это комплексная технология со своим особым подходом к решению задач, а не фиговина в которую можно абы как нахреначить «фишек» прикрываясь тем что мол на XML похоже, как это делает мелкософт
я не знаю какие люди придумывали эту «технологию», но думать в процессе этого действия они явно забылиЭту технологию придумывали в Microsoft, Compaq и Macromedia. Сейчас она является стандартом и называется SMIL.
Конечно остальные браузеры показали фигню, потому что там код написан только для IE. Это всего лишь единичный пример, если задаться целью найти кроссбраузерный пример (а не написать гневный комментарий), то это очень просто сделать.
а кому-то эту фигню придется еще и поддерживать после горе-верстальщика…
Странно, но в 11й опере не работает
Ubuntu, Opera 11, работает. только очень странно, анимация проходит очень быстро, но некоторое смягчение перехода всё же заметно.
Извиняюсь, я накосячил. Сейчас работает, но только когда все свойства собраны в одно.
У меня заработало, но не с первого раза.
Неожиданно, но факт:
не срабатывает на свойство background-image.
Вот здесь можно взглянуть на пример. Я специально поместил два блока один над другим. В одном блоке бекграунд задан картинкой, в другом цветом. Стили записаны абсолютно идентично. Фотография плавно не перетекает, цвет перетекает. Правда, проверил только в хроме.
не срабатывает на свойство background-image.
Вот здесь можно взглянуть на пример. Я специально поместил два блока один над другим. В одном блоке бекграунд задан картинкой, в другом цветом. Стили записаны абсолютно идентично. Фотография плавно не перетекает, цвет перетекает. Правда, проверил только в хроме.
-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, с помощью которого можно задать свою функцию изменения значения.
Есть старая статья Резига, критикующая нынешнее положение дел с CSS3 Transition и объясняет почему до сих пор не написали CSS3 Transition адаптер для jQuery.animate
Основные моменты критики:
1. Невозможно остановить анимацию, которая исполняется
2. Невозможно получить текущий статус анимации (то как она проходит) — существует только Event, говорящий о том, что анимация с этим элементом завершена.
4. Нет способа задания своих easing функций (cubic-bezier ему мало) он имеет в виду нет хорошей поддержки @keyframes
Хотя качество(плавность, меньшая нагрузка на ЦП) анимаци, которое предоставляет CSS3 Transition на много лучше чем текущий jQuery.animate stress test
Статья: ejohn.org/blog/css-animations-and-javascript/
Основные моменты критики:
1. Невозможно остановить анимацию, которая исполняется
2. Невозможно получить текущий статус анимации (то как она проходит) — существует только Event, говорящий о том, что анимация с этим элементом завершена.
el.addEventListener("transitionend", updateTransition, true);4. Нет способа задания своих easing функций (cubic-bezier ему мало) он имеет в виду нет хорошей поддержки @keyframes
Хотя качество(плавность, меньшая нагрузка на ЦП) анимаци, которое предоставляет CSS3 Transition на много лучше чем текущий jQuery.animate stress test
Статья: ejohn.org/blog/css-animations-and-javascript/
Мне одному кажется, что из-за transition-timing-function: ease блок в конце прыгает? Красоты ради, думаю, лучше linear.
Если кому интересно покрутить transition-timing-function: cubic-bezier вот редактор
Если кому интересно покрутить transition-timing-function: cubic-bezier вот редактор
Блок в конце прыгает из-за того, что размер шрифта при наведении выставлен 35px, а изначальный — 30px. Вам не кажется, он прыгает, но независимо от transition-timing-function.
Мне кажется, azproduction имел в виду подергивание в конце анимации при наведении. Я тоже это заметил, и причина — всё еще кривая реализация в любых браузерах :) Достаточно посмотреть на ужасающий transform при повороте текста, когда буквы весело скачут. Но всё впереди, и я искренне надеюсь, что настанет светлое время поддержки CSS3.
Ох, ошибочка вышла.
Поддержка действительно не самая лучшая, но в будущем все изменится, а пока глючных вещей можно избегать.
В любом случае я за то, чтоб в CSS вынесли простенькие анимации и градиенты — потому как не всегда есть возможность пользовать javascript (в соображениях безопасности). Как говорится: подождем — увидим.
Поддержка действительно не самая лучшая, но в будущем все изменится, а пока глючных вещей можно избегать.
В любом случае я за то, чтоб в CSS вынесли простенькие анимации и градиенты — потому как не всегда есть возможность пользовать javascript (в соображениях безопасности). Как говорится: подождем — увидим.
Для уверенности ставлю для всех браузеров вот так
-webkit-transition: свойство 200ms linear;
-moz-transition: свойство 200ms linear;
-o-transition: свойство 200ms linear;
transition: свойство 200ms linear;
Ссылки на примеры не работают
Страница с примером вирусная с всплывающими окнами, удалите!
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
CSS3 сейчас — transition