17. Keyframes

Веб разработка сайтов не так сложно, как кажется, если разобраться в  текстовом программировании HTML/CSS. В этой статье поговорим о промежуточных шагах в последовательности анимации CSS. Управляет этим правило @keyframes и дает больший контроль над промежуточными этапами анимационной последовательности, чем переходы.

Веб разработка сайтов: синтаксис

@keyframes slidein {
from {
margin-left 100%;
width 300%;
}

50% {
margin-left 50%;
width 200%;
}

to {
margin-left 0%;
width 100%;
}
}

Значения

JavaScript может получить доступ к @keyframes правилам с помощью интерфейса объектной модели CSS CSSKeyframesRule.

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

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

Действительные списки ключевых кадров

Если правило @keyframes не определяет начальные или конечные состояния анимации (то есть 0%from и 100%to, браузеры будут использовать существующие стили этого элемента для состояний начала и конца. Это можно использовать для анимации элемента из его начального состояния и обратно.

Свойства, которые не могут быть анимированы в правилах @keyframes, игнорируются, но поддерживаемые свойства все равно будут анимированы.

Веб разработка сайтов актуальное направление на рынке руда, поэтому специалисты, что создают веб продукты очень востребованы.

Обработка дубликатов

Если для данного имени существует несколько наборов ключевых кадров, используется последний, который встречается парсером. Правила @keyframes не каскадируются, поэтому анимации никогда не выводят ключевые кадры из нескольких наборов правил.

Если смещение времени анимации дублируется, используется последний ключевой кадр в правиле @keyframes для этого процента. Внутри правила @keyframes нет каскадирования, если несколько ключевых кадров определяют одинаковые процентные значения.

Когда свойства не заданы в некоторых ключевых кадрах

Свойства, которые не указаны в каждом ключевом кадре, по возможности интерполируются — свойства, которые невозможно интерполировать, удаляются из анимации.

Например:

@keyframes identifier {
0% {
top 0;
left 0;
}
30% {
top 50px;
}
68%,
72% {
left 50px;
}
100% {
top 100px;
left 100%;
}
}
Здесь свойство top анимирует, используя 0%, 30% и 100% ключевые кадры, а анимации для left используют 0%, 68% и 100% ключевые кадры.

Когда ключевой кадр определяется несколько раз

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

Например:

@keyframes identifier {
0% {
top 0;
}
50% {
top 30px;
left 20px;
}
50% {
top 10px;
}
100% {
top 0;
}
}
В этом примере на 50% ключевом кадре используется значение top 10px, а все остальные значения в этом ключевом кадре игнорируются.

Каскадные ключевые кадры поддерживаются начиная с Firefox 14. В приведенном выше примере это означает, что в 50% ключевом кадре будет добавлено значение left 20px. Это еще не определено в спецификации, но это обсуждается.

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

!important в ключевых кадрах

Объявления в ключевых кадрах с модификатором !important игнорируются.

Например:

@keyframes important1 {
from {
margin-top 50px;
}
50% {
margin-top 150px !important;
} ignored
to {
margin-top 100px;
}
}

@keyframes important2 {
from {
margin-top 50px;
margin-bottom 100px;
}
to {
margin-top 150px !important; ignored
margin-bottom 50px;
}
}

Поддержка браузерами

 

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