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



    Andy Clarke показал сообществу сайт-демонстрацию возможностей CSS3 Animation и анонсировал animatable.com с помощью которого демонстрация была сделана.

    С помощью Animatable анимацию можно создавать в пару кликов. Интерфейс очень похож на видеоредактор. В данный момент проект в разработке.

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



    Менее хорошие браузеры, увидят упрощенные варианты:





    В демонстрации Mad Animation так же используются Media Queries. То есть при уменьшении рамера браузера сайт оптимально подстраивает свой внешний вид вплоть до мобильных платформ (можно поиграться с размерами вашего браузера).

    Очень круто то, что оптимальные варианты отображения сайта как для браузеров, так и для их размеров, сделаны только с помощью CSS.
    Поделиться публикацией
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 40
    • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Если становится красным или черным, то это меняется 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;
          [...]


          Но странно, что у вас он срабатывает при изменении масштаба, а не размера браузера.
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              > На Ваших скринах фон темный, а у меня и под IE и под FF — серый (под хромом всё ок).

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

          • 0
            FF4 и Opera 11.10 — та же история.
          • –5
            Мужик с картинки Хитмана напомнил
            • +1
              Думаю в статье стоит указать что анимация была сделана на основе заставки сериала MedMan, точнее практический полностью её повторяет :)
              • –1
                А точно, это сериал который кучу наград получил, надо посмотреть, а то неприлично так ошибаться =)
                • –1
                  А мне не понравилось как-то. Помойму скучно. Даже первый сезон не осилил.
                  • –1
                    После первого сезона как раз самое интересно и начинается. А вот первый действительно, почти весь смотришь с вопросом «блин, ну когда уже будет что-то происходить??»
                    • 0
                      На вкус и цвет у каждого свои фломастеры. Но я считаю: сериал достойный, если не сказать — культовый.
              • +1
                Это заставка к сериалу «Mad Men», рекомендую к просмотру (сам сериал, разумеется).
                • –1
                  Это точно не заставка к «Mad Men»). С трудом себе представляю Д.Д. в костюме и кроссовках адидас… хотя сейчас, вроде 5й сезон на подходе)
                  А сериал действительно неплохой, жаль только первые два сезона нормально озвучили.
                  • –1
                    Я отвечал человеку, который сказал, что мужик на картинке похож на хитмана, но промахнулся и получился просто коммент, а в детали вдаваться не стал, просто порекомендовал посмотреть. Да, я даже несколько серий в оригинале с субтитрами смотрел.
                  • 0
                  • 0
                    animatable.com/ — господа, да это прорыв в плане отказа от Флеша! Вот он редактор, которого так не хватало, нет?
                    • 0
                      Как по мне, так это больше на just for fun походит, ибо для этих задач есть SVG + SMIL (+ JS).
                      • 0
                        А в чем преимущества SVG SMIL animation и недостаток CSS3 animation?
                        • +2
                          Контейнер с SVG можно точно также анимировать с помощью CSS, но использование HTML в качестве элементов анимации портит всю семантику. У SVG гораздо больше возможностей в плане рисования, в отличие от HTML, который попросту не предназначен для этого. Ну и Canvas тоже имеет место быть, но никак не HTML + CSS.
                        • 0
                          Неважно на чём. Важен сам факт, что такие анимации, работающие без сторонних плагинов, реально делать ГУЁвыми тулзами, а не только кодингом вручную.
                      • 0
                        Здорово! Вот кстати оригинал:
                        www.youtube.com/watch?v=WcRr-Fb5xQo
                      • +1
                        Как посмотреть анимацию? у меня только мужик в кресле сидит…
                        • 0
                          Нашел.
                          • НЛО прилетело и опубликовало эту надпись здесь
                            • НЛО прилетело и опубликовало эту надпись здесь
                              • +3
                                Да, с интуитивным интерфейсом бяда!
                            • 0
                              Поклонникам CSS-анимаций я могу прямо сейчас передать радостную весть: поддержка таких анимаций в браузере Firefox ужé на подходе.
                              • +2
                                image
                                • 0
                                  хм… интересно а JS лечилки css3 позволят воспроизвести это в ie 7?
                                  • 0
                                    а в IE6?)))
                                    • 0
                                      Перестал смотреть в сторону IE6. Для него делаю только заглушку с мольбой обновить браузер. =)
                                      • +1
                                        эх, все бы так. А то наверняка сейчас тут кто-нибудь появится и скажет, что деньги пользователей ИЕ6 не отличаются от остальных.
                                  • 0
                                    Демонстрация Mad Animation работает на webkit-браузерах — Chrome, Safari, браузерах для мобильных платформ (Android, BlackBerry, Apple iOS, WebOS). Они увидят всю красоту CSS (нужно кликнуть по «watch»):


                                    А MicroSoft нас уверяет что это только у них возможно xD
                                    • 0
                                      Motorola Milestone xt720 Android 2.1 — рывками и подтормаживает. Всю красоты через смартфон оценить не получилось.
                                      • 0
                                        HTC Inspire 4G Android 2.2.1

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

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


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

                                              browser: Chrome 12.0.733.0 dev

                                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                              Самое читаемое