CSS3 Анимация. Небольшой урок [ Перевод ]

Дата публикации:5 мая 2013 г. 13:05:21

Здравствуйте! Это что-то вроде перевода вот этой статьи. Для немного про поддержку браузерами (начиная с версии): Chrome 4.0, Firefox 5.0, Opera 12.0, Internet Explorer 10.0, Safari 4.0.

Как использовать анимацию

Возможность CSS анимации была введена в Webkit в 2007 году. В 2009 году рабочий проект был написан и добавлен в стандарт W3C. В течение трех следующих лет его начали поддерживать Firefox, Internet Explorer и, наконец, Opera.

Для использования CSS анимации, сначала необходимо указать несколько ключевых кадров для анимации - это нужно для того, чтобы указать браузеру, что должен будет делать элемент в определенное время. Остальное браузер сделает сам.

Код

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

@keyframes resize {
    0% {
        padding: 0;
    }
    50% {
        padding: 0 20px;
        background-color:rgba(255,0,0,0.2);
    }
    100% {
        padding: 0 100px;
        background-color:rgba(255,0,0,0.9);
    }
}

#box {
    animation-name: resize;
    animation-duration: 1s;
    animation-iteration-count: 4;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

Демо

Наведите курсор на объект, чтобы увидеть анимацию. Как видно, здесь количество итераций равно четырем. Вы можете сделать столько ключевых кадров, сколько вам нравится. Также можно создать бесконечную анимацию указав: animation-iteration-count: infinite. На этом все! Спасибо за внимание!