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

4 November, 2009

Fun, XHTML/CSS

Я занимался сексом с 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.: Лимерики взяты из журнала Трамвай,
автор Татьяна Петросян, остальные тут.

Fun, XHTML/CSS

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

Apathetic | 1. 4 November, 2009

Это просто офигенно. Спасибо за знакомство с этими чудесами =) Осталось только придумать, как их с пользой использовать. А то я уже предвижу массовую анимацию на всех сайтах подряд, как было с тем дурацким .

Apathetic | 2. 4 November, 2009

Nьфу ты, совершенно забыл, что все теги съедаются. Я имел ввиду бегущую строку, тег marquee.

rotor | 3. 4 November, 2009

Некоторые примеры впечатляют, другие наоборот напоминают жуткие javascript-эксперименты 5-ти и более летней давности.

Не думаю, что такая анимация получит широкое коммерческое распространение, но среди портфолио дизайнеров мы однозначно увидим ещё более потрясные штуки.

Я уже побежал что-нибудь такие придумывать :)

Ведомир | 4. 4 November, 2009

Да-а, у вас, похоже, просто дымились клавиатуры вместе с ошалевшими от открывшейся свободы мозгами! :D А как насчёт плавного изменения цвета в текстовых ссылках по hover?

akella | 5. 4 November, 2009

Энтузиазма нам было не занимать ;)
Со ссылками очень просто, вот вам готовый код:

  1. a{
  2. color:green;
  3. -webkit-transition:all 1s linear;
  4. }
  5. a:hover{
  6. color:red;
  7. }
Eisenhorn | 6. 5 November, 2009

А какие возможности для капчи открываются…

funtitled | 7. 5 November, 2009

Гуд бай, Флеш?

Михаил Валенцев | 8. 5 November, 2009

От меня спасибо за ссылку на Трамвай)

art | 9. 5 November, 2009

видел конечно эти спецэффекты, но все равно опять скажу: ахуеть!

Genn | 10. 5 November, 2009

funtitled, пока что далеко не гудбай. Да и смысл флеша не в визуальных украшательствах, а в функциональной технологии, позволяющей, например, показывать видео без проблем. Так что от флеша никуда не уйти пока что.

Если же говорить о визуальной части, то из всего того, что я узнал, увидел и опробовал, не хватает многого, чтобы полностью заменить даже Flash 5, не говоря уже о современных версиях, которые дают нам всем очень большие возможности для… ну… всего ;) Кроме, разве что, путешествий во времени. Впрочем, если захотеть, всегда можно придумать кучу подпорочек и приемчиков, которые будут как-то похоже работать. Еще одно большое преимущество флеша в том, что он работает в любом броузере и делает это одинаково. Если, конечно, установлен ;)

private_face | 11. 5 November, 2009

Про IE забыли.
rotate эмулируется фильтром matrix, а scale – свойством zoom. для переходов кажется тоже есть целый класс фильтров, но я никогда ими не интересовался.

Ante | 12. 5 November, 2009

Мои загнутые уголки http://stanut.by/css3/ :)

akella | 13. 5 November, 2009

@Ante возможно было бы еще круче если бы уголки загибались постепенно? Можно же анимировать background-position а не только opacyty.

@priveta_face: вы совершенно правы, но это же костыли, к тому же умирающие, и не стандартные. А задача тут скорее не в кроссбраузерных спецэффектах, а в удовольствии которое можно получить уже сейчас развлекаясь с анимацией ;)

Ante | 14. 5 November, 2009

@akella, они загибаются постепенно и там нет картинок, только -webkit-gradient и -webkit-box-shadow.

akella | 15. 5 November, 2009

Пардон :) на сам уголок не догадался сразу навести, потому не заметил. Выглядит офигительно! :)

Mourner | 16. 6 November, 2009

Классные штуки, я уже успел оценить. :) Хочется добавить, что -webkit-transform – незаменимая штука при анимации и интеракции вроде драгндропа в iPhone (и iPod Touch), даже если просто сдвигать элементы – в отличии от, скажем, top/left при position: absolute это свойство там аппаратно оптимизировано. Что позволяет к примеру Google Maps API v3 (и приложениям типа Latitude) работать настолько быстро под айфоном при тягании/зуме карты.

Идеи для визиток: из онлайна в реальность | rotorweb.ru | Проблемы и решения в Web-дизайне | 17. 6 November, 2009

[…] Инвестируем в блог или как потратить 100$. Всё крутится и летает […]

Алексей Матюшкин | 18. 6 November, 2009

BTW, in FF 3.7pre1—it works pretty fine.

akella | 19. 6 November, 2009

Спасибо Алексей! Добавил в примеры строку для FF. Жаль только в nightly build, и пока не совсем так как в Сафари =( Вот здесь и тут теперь и в Фаерфоксе работает, например.

cr_ | 20. 6 November, 2009

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

Apollojet | 21. 6 November, 2009

Ха!
10 лет все разработчики во вселенной дрались на форумах за “валидность” и разделение содержания, стиля и поведения – чтобы вдруг анимацию можно было бы писать в CSS! О, жизнь, ты – главный Драматург…

Автор, огромное спасибо за труды – отлично смотрится и вдохновляет.

Больше, больше эффектов c CSS3! | rotorweb.ru | Проблемы и решения в Web-дизайне | 22. 7 November, 2009

[…] Всё крутится и летает — очень оригинальные примеры анимации на CSS3. […]

Jimi Hendrix | 23. 9 November, 2009

Юра, давно хотел спросить — как вы тестируете сайты в разных броузерах, работая под Mac OS X(особенно интересуют IE 6-7-8, Сhrome и разные версии Оперы)?

cr_ | 24. 10 November, 2009

2 Apollojet, вообще-то каждая технология должна заниматься своим делом. css представлять, а js это всё же программная клиентская часть, а не способ создания свистоперделок.
тот же самый :hover и другие экшены в css есть не что иное как поведение (раньше вот через js это делали, да и сейчас тоже, ибо у ие7 с этим проблемки есть), но её использование ведь не вызывает никаких комментариев по поводу “разделения труда”, а воспринимается как само сабой разумеющееся. css – представлять, js – управлять, это же логично :)

akella | 25. 10 November, 2009

@Jimi: Есть Parallels и VirtualBox – можно просто запустить Windows и тестировать.

vavan | 26. 12 November, 2009

Юра, давно хотел спросить — как вы тестируете сайты в разных броузерах, работая под Mac OS X(особенно интересуют IE 6-7-8, Сhrome и разные версии Оперы)?

Юрко | 27. 12 November, 2009

Юра, давно хотел спросить — как вы тестируете сайты в разных броузерах, работая под Mac OS X(особенно интересуют IE 6-7-8, Сhrome и разные версии Оперы)?

Murz | 28. 16 November, 2009

А у меня что-то и в Firefox вроде бы заработало.
Надпись “Всё крутится и летает” поворачивается и выделяется как отдельный текст, код:
Всё крутится и летает

Браузер – Firefox 3.5.5 на Kubuntu Karmic.

Женя | 29. 26 November, 2009

Спасибо за «Трамвай»! Совсем забыл о нем, а тут у вас ссылочка на сканы.

alshur | 30. 2 December, 2009

до чего ж дошёл прогресс ;-)

Anton Diaz | 31. 4 January, 2010

Opera 10.50 pre-alpha уже поддерживает transform и transition через префикс -o-

Андрей | 32. 6 January, 2010

Юра, займитесь еще сексом с -webkit-gradient и расскажите что да как. Очень полезная вещица, особенно с типом radial можно очень интерессных эффектов добиться.

Андрей | 33. 6 January, 2010

Уже не нужно. Нашел (с linear и так все понятно, искал именно для radial):

http://www.the-art-of-web.com/css/radial-gradients/

Антон | 34. 2 March, 2010

Здорово! Остается только найти область применения на своем блоге. Можно в хедере что-нибудь замутить

Олег | 35. 3 March, 2010

Да, интересно, случайно искал инфу по HTML5, а нашел, то, что искал давно по CSS.

DeviceBox | 36. 28 March, 2010

Ничего себе, это просто сказочно! Сижу через Хром, прикольно было увидеть такое :)

cssing :: Архив :: Презентация про CSS3 и HTML5 на них же | 37. 31 March, 2010

[…] на который она ссылается станет видимым. Известное свойство transition позволит сделать нам это […]

Pavel | 38. 4 April, 2010

Привет
а ты случайно не пробовал скрестить background: -webkit-gradient и -webkit-transition?
а то у меня что-то не работает и не могу найти почему :)

akella | 39. 4 April, 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; Если задать в качестве фона картинку-градиент и “перетаскивать” ее плавно, получится такой вот красивый эффект анимации градиента.

Тимур | 40. 13 April, 2010

Крутотень, нужно будет тоже покрутить

Victor | 41. 19 April, 2010

Про браузеры могу добавить, что под Linux есть браузер Midori на том же webkit, что и Safari/Chrome – в нём эффекты хорошо видны, а под Windows есть хорошая программа IETester, которая содержит в себе IE 6-7-8.

Алексей | 42. 22 April, 2010

Полностью согласен с тем,что пока от этих чудес толку мало. Сначала надо дождаться поддержки этой технологии хотя бы у 90% пользователей интернета

Nine | 43. 11 July, 2010

Как сделать наклонный градиент, заданный в градусах, для webkit, как здесь? http://emfire.ru/

akella | 44. 12 July, 2010

Наложить горизонтальный градиент поверх вертикального?

void | 45. 15 October, 2010

akella, подскажите, а с помощью css можно добиться такого эффекта шапки ( http://www.urealty.ru – как тут? ).

akella | 46. 15 October, 2010

А что именно там за эффект? Дома под наклоном? Ну просто задать им transform:rotate(2deg)?

void | 47. 15 October, 2010

Да нет, сама панель у шапки (где ввод логина и пароля) – по середине кнопка – вверх – вниз (сворачивает шапку) – плюс слева есть возможность запомнить (сохранить) место положение.

akella | 48. 15 October, 2010

Ну, просто меняется margin-top для всего сайта, что тут такого?

Оставить комментарий