Как Вы могли заметить, мы считаем важным по мере возможности уменьшать количество кода, конечно, до тех пор, пока он остается читабельным. Многие анимации CSS, с которыми мы сталкиваемся, можно записать более компактно, и в этом уроке мы расскажем, как именно это можно сделать. 

Предположим, у нас есть простая анимация бьющегося сердца, например, такая:

Демонстрация работы

Код HTML

<div class="heart">&#x2665;</div>

Код CSS

/* Анимация бьющегося сердца */

@keyframes pound {
        from { transform: none; }
        50% { transform: scale(1.4); }
        to { transform: none; }
}

.heart {
        display: inline-block;
        font-size: 150px;
        color: #e00;
        animation: pound .5s infinite;
        transform-origin: center;
}
body { text-align: center; }

Уже видно, что именно здесь можно улучшить: состояние сжатого сердца повторяется дважды в ключевых кадрах конца и начала. Вы, вероятно, знаете, что их можно объединить в одно свойство следующим образом:

@keyframes pound {
        from, to { transform: none; }
        50% { transform: scale(1.4); }
}

Демонстрация работы

Код HTML

<div class="heart">&#x2665;</div>

Код CSS

/* Анимация бьющегося сердца */

@keyframes pound {
        from, to { transform: none; }
        50% { transform: scale(1.4); }
}

.heart {
        display: inline-block;
        font-size: 150px;
        color: #e00;
        animation: pound .5s infinite;
        transform-origin: center;
}
body { text-align: center; }

Но многие не знают, что эти два ключевых кадра вообще не нужны, так как они по факту повторяют свойства класса .heart (сердце). Процитируем спецификацию анимаций CSS:

“Если начальное состояние анимации или 0% не задано, браузер создает этот ключевой кадр из вычисляемых значений анимируемых свойств. Если конечное состояние анимации или 100% не задано, браузер создает этот ключевой кадр из вычисляемых значений анимируемых свойств”.

Поэтому нужный код может быть еще проще:

@keyframes pound {
        50% { transform: scale(1.4); }
}

Демонстрация работы

Код HTML

<div class="heart">&#x2665;</div>

Код CSS

/* Анимация бьющегося сердца */

@keyframes pound {
        50% { transform: scale(1.4); }
}

.heart {
        display: inline-block;
        font-size: 150px;
        color: #e00;
        animation: pound .5s infinite;
        transform-origin: center;
}
body { text-align: center; }

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

Чтобы эта анимация выглядела более естественно, будет лучше задать другую анимацию, но по-прежнему только с одним ключевым кадром, так как начальное состояние будет вычислено браузером:

@keyframes pound {
        to { transform: scale(1.4); }
}
.heart {
        /* ... */
        animation: pound .25s infinite alternate;
}

Демонстрация работы

Код HTML

<div class="heart">&#x2665;</div>

Код CSS

/* Анимация бьющегося сердца */

@keyframes pound {
        to { transform: scale(1.4); }
}

.heart {
        display: inline-block;
        font-size: 150px;
        color: #e00;
        animation: pound .25s infinite alternate;
        transform-origin: center;
}
body { text-align: center; }

В этом случае каждый четный раз анимация будет менять направление вместо того, чтобы в одном цикле анимации были оба состояния: сжатия и увеличения. Причина, по которой последний вариант анимации выглядит более естественно, — это направление анимации alternate, в нашем случае это значение alternate в сокращенном объявлении анимации, которое также меняет направление функции времени для анимации, воспроизводящейся в обратном порядке.

Автор урока Lea Verou

Смотрите также:

• Создание упрощенной анимации печати с использованием единицы измерения ch
• Создание анимированного меню с использованием CSS3
• Создание вращающихся значков социальных сетей с использованием CSS3