CSS анимация

Использование CSS-анимации для оживления HTML-страницы при помощи правила @keyframes и свойства animation.

1. Создание анимации
2. Использование анимации
   1. Длительность
   2. Скорость
   3. Задержка
   4. Повтор
   5. Направление

Создание ключевых кадров с помощью правила @keyframes

Синтаксис @keyframes с двумя ключевыми кадрами выглядит следующим образом:

@keyframes myAnimation_name {
    from {
        css-свойство: значение;
    }
    to {
        css-свойство: значение;
    }
}

Пример

@keyframes myAnime {
    from {
        color: gray;
    }
    to {
        color: lightblue;
    }
}

• from — начальная точка,
• to — конечный результат.

Синтаксис @keyframes с тремя и более ключевыми кадрами выглядит в процентном соотношении:

@keyframes myAnimation_name {
    0% {
        css-свойство1: значение1;
    }
    55% {
        css-свойство2: значение2;
    }
    100% {
        css-свойство3: значение3;
    }
}

Так же можно комбинировать и объединять кадры

@keyframes myAnimation_name {
    0%, 70% {
        css-свойство1: значение1;
    }
    55% {
      css-свойство2: значение2;
      css-свойство3: значение3;
    }
    100%, 20% {
        css-свойство4: значение4;
    }
}

После создания правила @keyframes создано, теперь его можно использовать в свойстве animation.

Использование созданной анимации

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

tag {
    animation: название_анимации длительность скорость задержка повтор направление; 
}

.myElement {
    animation: myAnimation_name 2.5s ease-out 5s infinite alternate-reverse;
}

В развёрнутом виде анимация выглядит следующим образом:

.myElement {
    animation-name: myAnimation_name;
    animation-duration: 2.5s;
    animation-timing-function: ease-out;
    animation-delay: 5s;
    animation-iteration-count: infinite; 
    animation-direction: alternate-reverse;
}

Чтобы анимация начала работать достаточно двух значений: animation-name (название анимации) и animation-duration (её длительность). Остальные значения будут использованы по умолчанию.

Длительность анимации — animation-duration

Задаётся в секундах или миллисекундах (s / ms)

animation-duration: 13.5s

Скорость проигрывания анимации — animation-timing-function

Существуют и другие варианты проигрывания анимации, которые можно создать самому, используя функцию cubic-bezier(). Но в большинстве случаев хватает стандартных вариантов использования.

animation-timing-function: ease-in-out

Задержка до начала анимации — animation-delay

Задаётся в секундах или миллисекундах (s / ms). Значение по умолчанию — 0.

animation-delay: 6.5s

Повторение анимации — animation-iteration-count

Задаётся с помощью целых положительных чисел: 1 — одно повторение, 2 — два, и т.д. Значение по умолчанию — 1. Для бесконечного проигрывания анимации — infinite.

animation-iteration-count: 6

Направление для анимации — animation-direction