CSS3-анимация

Оцените материал
(0 голосов)

Здравствуйте! В этой статье я хочу рассказать о таком новом и полезном свойстве CSS 3 как анимация. Анимация предоставляет большие возможности за изменением стиля элемента. При переходе в CSS у нас есть набор свойств с начальными значениями, которые имеет элемент до начала перехода, и конечными значениями, которые устанавливают после завершения перехода. Тогда как при анимации мы можем иметь не только два набора значений - начальные и конечные, но и множество промежуточных наборов значений.

Анимация опирается на последовательню смену ключевых кадров (keyframes). Каждый ключевой кадр определяет один набор значений для анимируемых свойств. И последовательная смена таких ключевых кадров фактически будет представлять анимацию.

По сути переходы применяют ту же модель - так же неявно определяются два ключевых кадра - начальный и конечный, а сам переход представляет переход от начального к конечному ключевому кадру. Единственное отличие анимации в данном случае состоит в том, что для анимации можно определить множество промежуточных ключевых кадров.

 В целом объявление ключевого кадра в CSS3 имеет следующую форму:

@keyframes название_анимации {
    from {
        /* начальные значения свойств CSS */
    }
    to {
        /* конечные значения свойств CSS */
    }
}

После ключевого слова @keyframes идет имя анимации. Затем в фигурных скобках определяются как минимум два ключевых кадра. Блок после ключевого слова from объявляется начальный ключевой кадр, а после клюевого слова to в блоке определяется конечный ключевой кадр. Внутри каждого ключевого кадра определяется одно или несколько свойств CSS, подобно тому, как создается обычный стиль.

Например, определим анимацю для фонового цвета элемента:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Анимация в CSS3</title>
        <style>
            @keyframes backgroundColorAnimation {
                from {
                    background-color: red;
                }
                to {
                    background-color: blue;
                }
            }
            div{
                width: 100px;
                height: 100px;
                margin: 40px 30px;
                border: 1px solid #333;
                 
                background-color: #ccc;
                animation-name: backgroundColorAnimation;
                animation-duration: 2s;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

Просмотреть  пример

В данном случае анимация называется backgroundColorAnimation. Анимация может иметь произвольное название. Эта анимация предоставляет переход от красного цвета фона к синему. Причем после завершения анимации будет устанавливться тот цвет, который определен у элемента div. Чтобы прикрепить анимацию к элементу, у него в стиле применяется свойство animation-name. Значение этого свойства - название применяемой анимации. Также с помощью свойства animation-duration необходимо задать время анимации в секундах или миллисекундах. В данном случае время анимации - это 2 секунды. При подобном определении анимация будет запускаться сразу после загрузки страницы. Однако можно также запускать анимацию по действию пользователя. Например, с помощью определения стиля для псевдокласса :hover можно определить запуск анимации при наведении указателя мыши на элемент:

@keyframes backgroundColorAnimation {
    from {
        background-color: red;
    }
    to {
        background-color: blue;
    }
}
div{
    width: 100px;
    height: 100px;
    margin: 40px 30px;
    border: 1px solid #333;
    background-color: #ccc;
}
div:hover{
                 
    animation-name: backgroundColorAnimation;
    animation-duration: 2s;
}

Множество ключевых кадров

Как уже выше говорилось выше, анимация кроме двух стандартных ключевых кадров позволяет задействовать множество промежуточных. Для определения промежуточного кадра применяется процентное значение анимации, в котором этот кадр должен использоваться:

@keyframes backgroundColorAnimation {
    from {
        background-color: red;
    }
    25%{
        background-color: yellow;
    }
    50%{
        background-color: green;
    }
    75%{
        background-color: blue;
    }
    to {
        background-color: violet;
    }
}

В данном случае анимация начинается с красного цвета. Через 25% времени анимации цвет меняется на желтый, еще через 25% - на зеленый и так далее.

Также можно в одном ключевом кадре анимировать сразу несколько свойств:

@keyframes backgroundColorAnimation {
    from {
        background-color: red;
        opacity: 0.2;
    }
    to {
        background-color: blue;
        opacity: 0.9;
    }
}

Также можно определить несколько отдельных анимаций, но применять из вместе:

@keyframes backgroundColorAnimation {
    from {
        background-color: red;
    }
    to {
        background-color: blue;
    }
}
@keyframes opacityAnimation {
    from {
        opacity: 0.2;
    }
    to {
        opacity: 0.9;
    }
}
div{
    width: 100px;
    height: 100px;
    margin: 40px 30px;
    border: 1px solid #333;
    background-color: #ccc;
     
    animation-name: backgroundColorAnimation, opacityAnimation;
    animation-duration: 2s, 3s;
}

В качестве значения свойства animation-name через запятую перечисляются анимации, и также через запятую у свойства animation-duration задается время этих анимаций. Название анимации и ее время сопоставляются по позиции, то есть анимация opacityAnimation будет длиться 3 секунды.

Завершение анимации

В общем случае после завершения временного интервала, указанного у свойства animation-duration, завершается и выполнение анимации. Однако с помощью дополнительных свойств мы можем переопределить это поведение. Так, свойство animation-iteration-count определяет, сколько раз будет повторяться анимация. Например, 3 повтора анимации подряд:

animation-iteration-count: 3;

Если необходимо, чтобы анимация запускалась бесконечное количество раз, то этому свойству присваивается значение infinite:

animation-iteration-count: infinite;

При повторе анимация будет начинаться снова с начального ключевого кадра. Но с помощью свойства animation-direction: alternate; противоположное направление анимации при повторе. То есть она будет начинаться с конечного ключевого кадра, а затем будет переход к начальному кадру:

animation-name: backgroundColorAnimation, opacityAnimation;
animation-duration: 2s, 2s;
animation-iteration-count: 3;
animation-direction: alternate;

При окончании анимации браузер устанавливает для анимированного элемента стиль, который был бы до применения анимации. Но свойство animation-fill-mode: forwards позволяет в качестве окончательного значения анимируемого свойства установить именно то, которое было в последнем кадре:

animation-name: backgroundColorAnimation;
animation-duration: 2s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards;

Задержка анимации

С помощью свойства animation-delay можно определить время задержки анимации:

animation-name: backgroundColorAnimation;
animation-duration: 5s;
animation-delay: 1s;    /* задержка в 1 секунду */

Функция плавности анимации

Как и к переходам, к анимации можно применять все те же функции плавности:

  • linear: линейная функция плавности, изменение свойства происходит равномерно по времени

  • ease: функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение

  • ease-in: функция плавности, при которой происходит только ускорение в начале

  • ease-out: функция плавности, при которой происходит только ускорение в начале

  • ease-in-out: функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение

  • cubic-bezier: для анимации применяется кубическая функция Безье

Для установки функции плавности применяется свойство animation-timing-function:

@keyframes backgroundColorAnimation {
    from {
        background-color: red;
    }
    to {
        background-color: blue;
    }
}
div{
    width: 100px;
    height: 100px;
    margin: 40px 30px;
    border: 1px solid #333;
                 
    animation-name: backgroundColorAnimation;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
}

Свойство animation

Свойство animation является сокращенным способом определения выше рассмотренных свойств:

animation: animation-name animation-duration animation-timing-function animation-iteration-count animation-direction animation-delay animation-fill-mode

Первые два параметра, которые предоставляют название и время анимации, являются обязательными. Остальные значения не обязательны.

Возьмем следующий набор свойств:

animation-name: backgroundColorAnimation;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-iteration-count: 3;
animation-direction: alternate;
animation-delay: 1s;

Этот набор будет эквивалентен следующему определению анимации:

animation: backgroundColorAnimation 5s ease-in-out 3 alternate 1s forwards;

Прочитано 898 раз Последнее изменение Суббота, 05 августа 2017 15:04
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+