Всё крутится и летает

04 Nov, 2009

Я занимался сексом с webkit-transition, результат можно увидеть тут, да и тут впрочем тоже, а вот что придумал Genn узнав об этом (примеры работают пока только в Хроме и Сафари).

Дальше будет немного теории, можно сразу перейти к примерам внизу.

transition transform

Это CSS3 свойства, которые пока работают только в Safari и Chrome. Еще они будут в следующей версии Firefox и Opera. Но пока нет.

Если вам совсем нечего делать, можно прочитать о них в спецификации про 2d-transforms и про transitions. Это всё конечно draft, но вряд ли что-то изменится.

Вкратце всё обстоит так.

transform — совершает всякие странные эффекты с блоком. По сути похоже на text-transform, просто эффекты более странные.
Например можно писать так:

  1. .weirdblock{
  2. transform: rotate(45deg) scale(2);
  3. }
Путем невероятных мыслительных усилий, вы уже могли бы догадаться что этот код повернет блок на 45 градусов, и увеличит его в размере в два раза, без анимации, просто такой моментальный эффект.

Был маленький и прямой, стал большой и кривой

Пока спецификация неактуальна, для Сафари и Хрома правило нужно писать с префиксом -webkit-. То есть вот так:

  1. .weirdblock{
  2. -webkit-transform: rotate(45deg) scale(2);
  3. }
Вот вобщем и всё, transform уже работает в последнем Фаерфоксе, кстати. Подробнее о нём.

transition — определяет анимацию блока. Используется примерно так:

  1. div{
  2. opacity:0.5;
  3. -webkit-transition: opacity 1s linear; /*opacity - что анимируем,1s - длительность эффекта, linear - плавность эффекта*/
  4. }
  5. div:hover{
  6. opacity:1;
  7. }
По наведению курсора, блок просто плавно изменит свою прозрачность за 1 секунду. Это мог бы быть фон, размер и цвет текста и все что угодно. Всё можно анимировать. А вот так например можно плавно менять цвет ссылки по наведению мыши:
  1. a{
  2. color:green;
  3. -webkit-transition:all 1s linear;
  4. }
  5. a:hover{
  6. color:red;
  7. }
А теперь примеры! ;)

Примеры (пока только для Safari и Chrome)

Анимация во всех примерах начинается по наведению мышки. Когда убираете мышку, она проигрывается до исходного состояния.

Первое что пришло в голову, сделать анимированный комикс ;) Вот что получилось, выглядит странно, но он целиком сделан на CSS! Подумать только!

Дальше, еще интересней, я решил анимировать слова. А потом, конечно, это случилось и с буквами. :) Удивительно в этом то, что эту анимацию совершают всего 3-4 строки CSS-кода. (ну и джаваскрипт который предварительно раскидывает буквы по всему экрану, но это его единственная задача)

Если добавить изменение размера, получается забавно. А потом их можно еще и крутить ;), тогда они похожи на муравьёв. Но с двумя лимериками уже начинает тормозить.

По дороге получился смешной неудачный вариант. Буквы тут довольно неуклюжие.

Genn сделал ASCII трибьют, и еще один, не менее клёвый. Еще один прекрасный с отложенной анимацией (-webkit-transition-delay). И синяя лужа.

Может и у вас есть варианты? :)

Если у вас вдруг нет ни Сафари ни Хрома, вот видео пары анимаций:

Нравятся мне буквы

Разбросанные буквы

Пример от Genn

Opera & Firefox

В последних непубличных версиях этих браузеров эффекты уже работают, и вызываются соответствующими правилами -o-transform, -o-transition, -moz-transform, -moz-transition. Так что теоретически, если вы делаете эффект для сайта, правила можно продублировать с этими префиксами, авось потом заработает ;). Пока что свойства идеально деградируют в других браузерах, просто анимации нет, все происходит мгновенно. А красотами наслаждаемся в Хроме и Сафари.

Мне известно только два, не совсем бесполезных варианта использования этих свойств, вот здесь в правой колонке внизу и вот тут смешно крутятся диски. Но, учитывая скорую поддержку Оперы и Фаерфокса, можно придумать что-то интересное =)

Все примеры

Ваш арт по теме и мнение более чем приветствуется! :)

P.S.: Лимерики взяты из журнала Трамвай,
автор Татьяна Петросян, остальные тут.

48 комментариев к “Всё крутится и летает”

1.DeviceBox | 28 Mar, 2010
Ничего себе, это просто сказочно! Сижу через Хром, прикольно было увидеть такое :)
2.Антон | 02 Mar, 2010
Здорово! Остается только найти область применения на своем блоге. Можно в хедере что-нибудь замутить
3.Олег | 03 Mar, 2010
Да, интересно, случайно искал инфу по HTML5, а нашел, то, что искал давно по CSS.
4.Тимур | 13 Apr, 2010
Крутотень, нужно будет тоже покрутить
5.Victor | 19 Apr, 2010
Про браузеры могу добавить, что под Linux есть браузер Midori на том же webkit, что и Safari/Chrome - в нём эффекты хорошо видны, а под Windows есть хорошая программа IETester, которая содержит в себе IE 6-7-8.
6.akella | 04 Apr, 2010
Я пробовал но в чистом виде они вроде не анимируются. Получилось только Градиент → Цвет (градиент остается, но фон под ним меняется). Типа так:
  1. a {
  2. background: -webkit-gradient(linear, left top, left bottom, from(rgba(20,50,100,1)), to(rgba(40,70,150,0.6)), color-stop(0.5,rgba(30,60,125,0.6)));
  3. display: block;
  4. -webkit-transition:all 1s linear;
  5. }
  6. a:hover {
  7. background-color: #c80;
  8. }
Но, в принципе можно эмулировать их поддержку с помощью анимации для background-position; Если задать в качестве фона картинку-градиент и "перетаскивать" ее плавно, получится такой вот красивый эффект анимации градиента.
7.Pavel | 04 Apr, 2010
Привет а ты случайно не пробовал скрестить background: -webkit-gradient и -webkit-transition? а то у меня что-то не работает и не могу найти почему :)
8.cssing :: Архив :: Презентация про CSS3 и HTML5 на них же | 31 Mar, 2010
[...] на который она ссылается станет видимым. Известное свойство transition позволит сделать нам это [...]
9.Андрей | 06 Jan, 2010
Юра, займитесь еще сексом с -webkit-gradient и расскажите что да как. Очень полезная вещица, особенно с типом radial можно очень интерессных эффектов добиться.
10.Андрей | 06 Jan, 2010
Уже не нужно. Нашел (с linear и так все понятно, искал именно для radial): http://www.the-art-of-web.com/css/radial-gradients/
11.Anton Diaz | 04 Jan, 2010
Opera 10.50 pre-alpha уже поддерживает transform и transition через префикс -o-
12.Женя | 26 Nov, 2009
Спасибо за «Трамвай»! Совсем забыл о нем, а тут у вас ссылочка на сканы.
13.alshur | 02 Dec, 2009
до чего ж дошёл прогресс ;-)
14.Murz | 16 Nov, 2009
А у меня что-то и в Firefox вроде бы заработало. Надпись "Всё крутится и летает" поворачивается и выделяется как отдельный текст, код: Всё крутится и летает Браузер - Firefox 3.5.5 на Kubuntu Karmic.
15.Алексей Матюшкин | 06 Nov, 2009
BTW, in FF 3.7pre1—it works pretty fine.
16.akella | 06 Nov, 2009
Спасибо Алексей! Добавил в примеры строку для FF. Жаль только в nightly build, и пока не совсем так как в Сафари =( Вот здесь и тут теперь и в Фаерфоксе работает, например.
17.Jimi Hendrix | 09 Nov, 2009
Юра, давно хотел спросить -- как вы тестируете сайты в разных броузерах, работая под Mac OS X(особенно интересуют IE 6-7-8, Сhrome и разные версии Оперы)?
18.cr_ | 10 Nov, 2009
2 Apollojet, вообще-то каждая технология должна заниматься своим делом. css представлять, а js это всё же программная клиентская часть, а не способ создания свистоперделок. тот же самый :hover и другие экшены в css есть не что иное как поведение (раньше вот через js это делали, да и сейчас тоже, ибо у ие7 с этим проблемки есть), но её использование ведь не вызывает никаких комментариев по поводу "разделения труда", а воспринимается как само сабой разумеющееся. css - представлять, js - управлять, это же логично :)
19.akella | 10 Nov, 2009
@Jimi: Есть Parallels и VirtualBox - можно просто запустить Windows и тестировать.
20.vavan | 12 Nov, 2009
Юра, давно хотел спросить — как вы тестируете сайты в разных броузерах, работая под Mac OS X(особенно интересуют IE 6-7-8, Сhrome и разные версии Оперы)?
21.Юрко | 12 Nov, 2009
Юра, давно хотел спросить — как вы тестируете сайты в разных броузерах, работая под Mac OS X(особенно интересуют IE 6-7-8, Сhrome и разные версии Оперы)?
22.Идеи для визиток: из онлайна в реальность | rotorweb.ru | Проблемы и решения в Web-дизайне | 06 Nov, 2009
[...] Инвестируем в блог или как потратить 100$. Всё крутится и летает [...]
23.Mourner | 06 Nov, 2009
Классные штуки, я уже успел оценить. :) Хочется добавить, что -webkit-transform - незаменимая штука при анимации и интеракции вроде драгндропа в iPhone (и iPod Touch), даже если просто сдвигать элементы - в отличии от, скажем, top/left при position: absolute это свойство там аппаратно оптимизировано. Что позволяет к примеру Google Maps API v3 (и приложениям типа Latitude) работать настолько быстро под айфоном при тягании/зуме карты.
24.akella | 05 Nov, 2009
@Ante возможно было бы еще круче если бы уголки загибались постепенно? Можно же анимировать background-position а не только opacyty. @priveta_face: вы совершенно правы, но это же костыли, к тому же умирающие, и не стандартные. А задача тут скорее не в кроссбраузерных спецэффектах, а в удовольствии которое можно получить уже сейчас развлекаясь с анимацией ;)
25.Ante | 05 Nov, 2009
@akella, они загибаются постепенно и там нет картинок, только -webkit-gradient и -webkit-box-shadow.
26.akella | 05 Nov, 2009
Пардон :) на сам уголок не догадался сразу навести, потому не заметил. Выглядит офигительно! :)
27.private_face | 05 Nov, 2009
Про IE забыли. rotate эмулируется фильтром matrix, а scale - свойством zoom. для переходов кажется тоже есть целый класс фильтров, но я никогда ими не интересовался.
28.Ante | 05 Nov, 2009
Мои загнутые уголки http://stanut.by/css3/ :)
29.Eisenhorn | 05 Nov, 2009
А какие возможности для капчи открываются...
30.funtitled | 05 Nov, 2009
Гуд бай, Флеш?
31.Михаил Валенцев | 05 Nov, 2009
От меня спасибо за ссылку на Трамвай)
32.art | 05 Nov, 2009
видел конечно эти спецэффекты, но все равно опять скажу: ахуеть!
33.Genn | 05 Nov, 2009
funtitled, пока что далеко не гудбай. Да и смысл флеша не в визуальных украшательствах, а в функциональной технологии, позволяющей, например, показывать видео без проблем. Так что от флеша никуда не уйти пока что. Если же говорить о визуальной части, то из всего того, что я узнал, увидел и опробовал, не хватает многого, чтобы полностью заменить даже Flash 5, не говоря уже о современных версиях, которые дают нам всем очень большие возможности для… ну… всего ;) Кроме, разве что, путешествий во времени. Впрочем, если захотеть, всегда можно придумать кучу подпорочек и приемчиков, которые будут как-то похоже работать. Еще одно большое преимущество флеша в том, что он работает в любом броузере и делает это одинаково. Если, конечно, установлен ;)
34.Ведомир | 04 Nov, 2009
Да-а, у вас, похоже, просто дымились клавиатуры вместе с ошалевшими от открывшейся свободы мозгами! :D А как насчёт плавного изменения цвета в текстовых ссылках по hover?
35.akella | 04 Nov, 2009
Энтузиазма нам было не занимать ;) Со ссылками очень просто, вот вам готовый код:
  1. a{
  2. color:green;
  3. -webkit-transition:all 1s linear;
  4. }
  5. a:hover{
  6. color:red;
  7. }
36.Больше, больше эффектов c CSS3! | rotorweb.ru | Проблемы и решения в Web-дизайне | 07 Nov, 2009
[...] Всё крутится и летает — очень оригинальные примеры анимации на CSS3. [...]
37.Apollojet | 06 Nov, 2009
Ха! 10 лет все разработчики во вселенной дрались на форумах за "валидность" и разделение содержания, стиля и поведения - чтобы вдруг анимацию можно было бы писать в CSS! О, жизнь, ты - главный Драматург... Автор, огромное спасибо за труды - отлично смотрится и вдохновляет.
38.cr_ | 06 Nov, 2009
это афигенно! касательно простых эффектов, то при достаточной поддержке всеми нормальными браузерами, можно сразу и про js забыть (и юзать только для ие).
39.Apathetic | 04 Nov, 2009
Это просто офигенно. Спасибо за знакомство с этими чудесами =) Осталось только придумать, как их с пользой использовать. А то я уже предвижу массовую анимацию на всех сайтах подряд, как было с тем дурацким .
40.Apathetic | 04 Nov, 2009
Nьфу ты, совершенно забыл, что все теги съедаются. Я имел ввиду бегущую строку, тег marquee.
41.rotor | 04 Nov, 2009
Некоторые примеры впечатляют, другие наоборот напоминают жуткие javascript-эксперименты 5-ти и более летней давности. Не думаю, что такая анимация получит широкое коммерческое распространение, но среди портфолио дизайнеров мы однозначно увидим ещё более потрясные штуки. Я уже побежал что-нибудь такие придумывать :)
42.Алексей | 22 Apr, 2010
Полностью согласен с тем,что пока от этих чудес толку мало. Сначала надо дождаться поддержки этой технологии хотя бы у 90% пользователей интернета
43.Nine | 11 Jul, 2010
Как сделать наклонный градиент, заданный в градусах, для webkit, как здесь? http://emfire.ru/
44.akella | 12 Jul, 2010
Наложить горизонтальный градиент поверх вертикального?
45.akella | 15 Oct, 2010
А что именно там за эффект? Дома под наклоном? Ну просто задать им transform:rotate(2deg)?
46.void | 15 Oct, 2010
Да нет, сама панель у шапки (где ввод логина и пароля) - по середине кнопка - вверх - вниз (сворачивает шапку) - плюс слева есть возможность запомнить (сохранить) место положение.
47.void | 15 Oct, 2010
akella, подскажите, а с помощью css можно добиться такого эффекта шапки ( http://www.urealty.ru - как тут? ).
48.akella | 15 Oct, 2010
Ну, просто меняется margin-top для всего сайта, что тут такого?