Создание анимаций CSS с использованием единственного ключевого кадра
29 января 2016 | Опубликовано в css | 1 Комментарий »
Как Вы могли заметить, мы считаем важным по мере возможности уменьшать количество кода, конечно, до тех пор, пока он остается читабельным. Многие анимации CSS, с которыми мы сталкиваемся, можно записать более компактно, и в этом уроке мы расскажем, как именно это можно сделать.
Предположим, у нас есть простая анимация бьющегося сердца, например, такая:
Код HTML
<div class="heart">♥</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">♥</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">♥</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">♥</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
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Создание плавных анимаций с использованием состояния воспроизведения анимации
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191