Animate.css — набор кроссбраузерных CSS3 анимаций

    Animate.css




    На днях наткнулся на эту замечательную вещь и решил поделиться с Хабрахабром.
    Animate.css — сборка отличных кроссбраузерных CSS3 анимаций в одном файле.


    Немного о библиотеке

    Библиотека включает в себя 56 анимаций, сгруппированных по типу эффекта, включает в себя «вход» и «выход» из анимирования элемента, а так же простой конструктор, который даёт возможность включить в файл только нужные эффекты.
    Библиотеку уже используют сайты Foursquare, EA, Disney и пр.

    Использование

    Для того, чтоб добавить к элементу анимацию, нужно присвоить ему 2 класса: класс нужной анимации, и класс animated, для запуска анимации:
    <div id="example" class="flip animated"></div>
    


    Больше мне сказать нечего, достаточно взглянуть демо.

    Автор: Daniel Eden
    Демо
    Github
    Конструктор
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 23

      +1
      Помимо самих анимаций очень нравится их логотип.
        0
        fadein тут вообще находка, спасибо.
          0
          Зашёл в IE10 ткнул на flip, после анимации, слева от элемента, остались вертикальные полосы. В FF всё норм.
            0
            IE10 — все ок
                0
                У меня такая же проблема. У вас встроеная видео Intel i-series?
                  +3
                  Nvidia geforce 210
                  Это что это получается, вёрстку теперь не только под браузеры, но и под видеокарты «точить»?!
                    0
                    И шрифты тоже.
                  0
                  Да я верю. Возможно драйвера замешаны (IE подобное не через директ ли рисует). Проверил в IE10 на ноуте с встроенной видео — тоже все ок
              0
              Слово «кроссбраузерных» ввело меня в заблуждение, я уж было на чудо понадеялся…
                +8
                Пожалуй этот пост — подходящее место, чтобы упомянуть Effeckt.css. Похожую, но более универсальуую библиотеку.
                  0
                  О какой кроссбраузерности речь, если в демо логотип работает лишь на ie10+?
                    +1
                    А вы рассчитывали, что CSS3 анимация на ие6 заведется?
                    Будьте реалистом, кроссбраузерная здесь значит, что работает во всех актуальных браузерах.
                    И, кстати, последний Хром, Убунту — анимация в логотипе работает.
                      0
                      Не рассчитывал, конечно же, но заголовок вполне может ввести в заблуждение. Много ли кто, услышав/прочитав «кроссбраузерный», не вспоминает об ie?
                        0
                        Ну, например я не очень то о нём вспоминаю ввиду того, что я особо его не застал или сидел на вменяемых на то время браузерах)
                        Если есть идея, как исправить заголовок, то я с радостью исправлю
                          +1
                          Зависть. Практически всегда приходится тестить всё в ie7+

                          Нет идей. Ведь по сути термин подходящий. Просто динозавры долго вымирают)
                            0
                            Проводите разъяснительную работу среди начальства (заказчиков).
                        +1
                        Ну так оно нормально и в актуальных не работает как надо. 12-я опера половину не съела
                      0
                      [Не туда]
                        +1
                        кстати для key frame animation lab.royowl.com/jquery-keyframe/ и github.com/krazyjakee/jQuery-Keyframes чтобы в старых браузерах работало =)
                          0
                          Всё же они не так удобны, как если бы код CSS анализировали самостоятельно.
                            0
                            кто мешает написать обертку под это?)
                          0
                          Ещё вот такая штука есть — cssanimate.com/

                          Only users with full accounts can post comments. Log in, please.