Hellcunt Apr 15 2011 at 12:06

CSS3 Animation в несколько кликов

1 min

5.7K

CSS*

+52

Comments 40

UFO just landed and posted this here

Hellcunt Apr 15 2011 at 12:24

Если становится красным или черным, то это меняется background-color с помощью Media Queries:

/* 480px */



@media handheld and (max-width : 480px),

screen and (max-device-width : 480px),

screen and (max-width : 480px) {



html.cssanimations {

 background-color : rgb(40,40,40)!important;

[...]

Но странно, что у вас он срабатывает при изменении масштаба, а не размера браузера.

UFO just landed and posted this here

Hellcunt Apr 15 2011 at 12:49

> На Ваших скринах фон темный, а у меня и под IE и под FF — серый (под хромом всё ок).

При определенных разрешениях у меня тоже бывает серый, это все Media Queries :)

Fesor Apr 15 2011 at 12:51

FF4 и Opera 11.10 — та же история.

chEbba Apr 15 2011 at 12:46

Мужик с картинки Хитмана напомнил

-5

Smorpy Apr 15 2011 at 12:59

Думаю в статье стоит указать что анимация была сделана на основе заставки сериала MedMan, точнее практический полностью её повторяет :)

chEbba Apr 15 2011 at 13:07

А точно, это сериал который кучу наград получил, надо посмотреть, а то неприлично так ошибаться =)

-1

asm0dey Apr 15 2011 at 14:17

А мне не понравилось как-то. Помойму скучно. Даже первый сезон не осилил.

-1

vicnaum Apr 15 2011 at 15:48

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

-1

vitiss Apr 15 2011 at 17:10

На вкус и цвет у каждого свои фломастеры. Но я считаю: сериал достойный, если не сказать — культовый.

Stranger Apr 15 2011 at 13:03

Это заставка к сериалу «Mad Men», рекомендую к просмотру (сам сериал, разумеется).

Untitled Apr 15 2011 at 14:24

Это точно не заставка к «Mad Men»). С трудом себе представляю Д.Д. в костюме и кроссовках адидас… хотя сейчас, вроде 5й сезон на подходе)
А сериал действительно неплохой, жаль только первые два сезона нормально озвучили.

-1

Stranger Apr 15 2011 at 14:33

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

-1

stansult Apr 16 2011 at 10:21

Evengard Apr 15 2011 at 13:05

animatable.com/ — господа, да это прорыв в плане отказа от Флеша! Вот он редактор, которого так не хватало, нет?

Serator Apr 15 2011 at 13:53

Как по мне, так это больше на just for fun походит, ибо для этих задач есть SVG + SMIL (+ JS).

Hellcunt Apr 15 2011 at 14:07

А в чем преимущества SVG SMIL animation и недостаток CSS3 animation?

Serator Apr 15 2011 at 15:26

Контейнер с SVG можно точно также анимировать с помощью CSS, но использование HTML в качестве элементов анимации портит всю семантику. У SVG гораздо больше возможностей в плане рисования, в отличие от HTML, который попросту не предназначен для этого. Ну и Canvas тоже имеет место быть, но никак не HTML + CSS.

Evengard Apr 15 2011 at 22:36

Неважно на чём. Важен сам факт, что такие анимации, работающие без сторонних плагинов, реально делать ГУЁвыми тулзами, а не только кодингом вручную.

vick Apr 15 2011 at 13:28

Здорово! Вот кстати оригинал:
www.youtube.com/watch?v=WcRr-Fb5xQo

vick Apr 15 2011 at 13:36

И вариант =~ s/Mad Men/Simpsons/g:
www.youtube.com/watch?v=KcmM7Jh2Y3k

anreyyyy Apr 15 2011 at 14:09

Как посмотреть анимацию? у меня только мужик в кресле сидит…

anreyyyy Apr 15 2011 at 14:15

Нашел.

UFO just landed and posted this here

anreyyyy Apr 15 2011 at 14:22

Да, с интуитивным интерфейсом бяда!

Mithgol Apr 15 2011 at 14:28

Поклонникам CSS-анимаций я могу прямо сейчас передать радостную весть: поддержка таких анимаций в браузере Firefox ужé на подходе.

Lungo Apr 15 2011 at 15:07

de_arnst Apr 15 2011 at 15:17

хм… интересно а JS лечилки css3 позволят воспроизвести это в ie 7?

Elegar Apr 15 2011 at 15:40

а в IE6?)))

de_arnst Apr 15 2011 at 15:48

Перестал смотреть в сторону IE6. Для него делаю только заглушку с мольбой обновить браузер. =)

Elegar Apr 15 2011 at 15:52

эх, все бы так. А то наверняка сейчас тут кто-нибудь появится и скажет, что деньги пользователей ИЕ6 не отличаются от остальных.

HoochieMen Apr 15 2011 at 16:34

Демонстрация Mad Animation работает на webkit-браузерах — Chrome, Safari, браузерах для мобильных платформ (Android, BlackBerry, Apple iOS, WebOS). Они увидят всю красоту CSS (нужно кликнуть по «watch»):

А MicroSoft нас уверяет что это только у них возможно xD

de_arnst Apr 15 2011 at 17:55

Motorola Milestone xt720 Android 2.1 — рывками и подтормаживает. Всю красоты через смартфон оценить не получилось.

irsick Apr 15 2011 at 21:26

HTC Inspire 4G Android 2.2.1

В родном браузере открылость с минимальными тормозами (в эпизодах с падающим телом)
В Dolphin HD работало почти идеально.
В Opera mobile и FireFox Mobile, как уже писали выше, не открывается, т.к. не webkit

TEHEK Apr 15 2011 at 23:19

К сожалению в браузерах все плохо со сглаживанием… да и много еще над чем надо порабоать. Но тенденция несомненно радует =)

pkMIXER Apr 16 2011 at 00:47

Удивило, процессор почти не есть во время просмотра анимации! Замечательно!

stansult Apr 16 2011 at 10:20

У кого ещё, как у меня, все объекты выделены красными/синими многоугольниками?
Напоминает режим «Show redraw regions» (или типа того) debug-версии flash player?

и главное: как избавиться?

browser: Chrome 12.0.733.0 dev

Show the best of all time