@keyframes
Поддержка браузерами
Описание
CSS правило @keyframes позволяет разработчику контролировать промежуточные шаги в последовательности исполнения CSS анимации с помощью создания ключевых кадров (или путевых точек) вдоль последовательности анимации, которые достигаются в определенные моменты времени исполнения анимации. Это дает больше контроля над промежуточными этапами последовательности анимации, чем когда браузер обрабатывает все автоматически.
Для использования ключевых кадров, создается правило @keyframes с именем, которое затем используется в свойстве animation ( или animation-name) для добавления списка ключевых кадров в анимацию. Каждое правило @keyframes содержит список стилей для селекторов ключевых кадров, каждый из которых состоит из процента для анимации, при котором происходит ключевой кадр, и блока кода, содержащего информацию о стиле для этого ключевого кадра.
Перечислять ключевые кадры можно в любом порядке, они все равно будут обрабатываться в том порядке, в котором их указанный процент указывает когда они должны сработать.
Допустимые значения селекторов для ключевых кадров
Чтобы список ключевых кадров был корректным, он должен включать в себя минимум два значения: 0% ( или from) и 100% (или to), то есть начинать и заканчивать цикл анимации. Если оба эти значения не указаны, то все CSS правило считается недопустимым и не может быть использовано для анимации.
Если правило содержит свойства, которые не могут быть анимированы, они будут проигнорированы, но поддерживаемые свойства по-прежнему будут анимироваться.
Значения свойства
Значение | Описание |
---|---|
имя_анимации | Обязательный параметр. Определяет название анимации. |
селектор-ключевого-кадра | Обязательный параметр. Указывается в процентах от продолжительности анимации. |
0-100%
from (то же, что и 0%)
to (то же, что и 100%)
Источник
Что такое кейфрейм (keyframe) и для чего он нужен.
При монтаже видео, и не важно в какой программе, одним из самых фундаментальных понятий является использование кейфреймов. Что такое кейфрейм и как с ними работать, читаем в этой статье.
Что такое кейфрейм (key frame)?
Кейфрейм – key frame – ключевой кадр. Это начальная и конечная позиция на шкале времени, между которыми происходит анимация медиа файлов. Анимация может быть самой различной. Это может быть изменения размера медиа, это может быть поворот медиа, это может быть изменение цвета и другие виды изменений.
Таким образом монтажеру достаточно будет указать нужные значения только в первой и в последних точках. Программа для монтажа сама вычислит значения для всех остальных кадров.
Так на примере, значение первого кадра по ширине – 2 сантиметра. Через десять секунд мы выставляем, что значение кадра будет равным 4 сантиметра. А вот значения во всех остальных промежуточных кадрах, программа будет вычислять сама. Таким образом освобождая монтажера от рутинной работы по корректировке каждого кадра в промежутке.
Для чего нужен кейфрейм (keyframe)?
Кейфреймы в монтаже используются постоянно. Это может быть изменение значения ширины кадра, это может быть просто перемещение объекта по кадру. А также изменение нескольких значений одновременно. Для всех этих расчетов используется кейфрейм.
В каких программах можно применять кейфреймы?
Кейфреймы можно применять в любых из программ для монтажа, которые позволяют изменять значения медиа. Это могут быть и такие продвинутые как Adobe After Effects, могут быть такие как Sony Vegas, а может быть и просто маленькие программы, в том том числе те, которые работают на телефоне. Причем программы могут быть не обязательно для монтажа видео. Это могут быть также программы для создания слайдшоу и даже в программах по редактированию звука. А в программах для создания мультипликации и различных эффектов, без создания ключевых кадров и вовсе никуда не уйти. При всем при этом, все они используют один фундаментальный инструмент, а именно кейфрейм (key frame).
Теперь, как я надеюсь, вы разобрались с этим термином — кейфрейм, и теперь вы их сможете постоянно их использовать в своей работе по монтажу видео.
Источник
Правило @keyframes
Первый этап создания CSS-анимации — это определение ключевых кадров. В ключевом кадре определяется вид той или иной сцены. Таких кадров может быть множество. Когда анимация воспроизводится, браузер двигается от одного ключевого кадра ко второму и прорисовывает промежуточные значения между ними. Яркий пример подобной прорисовки — анимация через transition , где вы предоставляете два ключевых кадра (начальный и конечный стили), а браузер берет на себя работу по просчету промежуточных фаз. Ключевые кадры позволяют создавать большее количество стилей, а не ограничиваться двумя.
Для записи ключевых кадров используется специальное правило @keyframes . В каждом ключевом кадре необходимо разместить те свойства, которые должны применяться к элементу в заданный момент времени.
Структура правила выглядит следующим образом:
Сначала мы объявляем правило с помощью слова @keyframes , после чего указываем название анимации (имя может быть произвольным, но при этом желательно сделать его информативным). Следом, в фигурных скобках записываем ключевые кадры (минимум два). В нашем примере первый кадр начинается ключевым словом from , а второй — словом to . После этого ставятся фигурные скобки, в которых записываются необходимые CSS-свойства в привычном нам формате. Другими словами, каждый ключевой кадр имеет вид обычного стиля CSS, состоящего из набора свойств.
Представим, что мы хотим создать примитивную двухкадровую анимацию, в которой один цвет фона (красный) меняется на другой (зеленый). Мы запишем правило в таком виде:
Но это самый простой пример. Как мы уже говорили, можно создавать более двух ключевых кадров, что гораздо более интересно. Давайте модифицируем наш пример, добавив еще один ключевой кадр в середину анимации, чтобы фоновый цвет сначала менялся с красного на желтый, а затем с желтого на зеленый:
Запись 50% означает, что фон станет желтым ровно в середине анимации. По такому принципу можно добавлять сколько угодно ключевых кадров — просто используйте необходимое число в процентах (30%, 60%, 75% и так далее). Позже, когда будет задана длительность анимации, станет понятно, сколько времени пройдет до появления желтого цвета. К примеру, если вы установите длительность в размере 6 секунд, то желтый цвет фона появится через 3 секунды после старта анимации.
Разумеется, можно указывать в одном кадре несколько CSS-свойств. Например, чтобы сместить наш элемент вниз на 50 пикселей к середине анимации, и еще на 50 пикселей — к концу анимации, следует записать:
Еще более интересно то, что можно создавать паузы в анимации, записывая один набор свойств для нескольких ключевых кадров сразу. Например, чтобы красный цвет сменился на желтый к 33% от длительности анимации, а переход от желтого к зеленому начался после 66%, запишите следующее:
Таким образом мы создадим эффект паузы на временном отрезке с 33% до 66%.
Ключевые слова from и to равнозначны процентным записям 0% и 100% соответственно. Вам не обязательно начинать анимацию с 0% и заканчивать на 100%. Ее можно запускать позже и завершать раньше, при этом добиваясь интересных эффектов.
Кроссбраузерность
CSS-анимация поддерживается всеми современными браузерами. В Internet Explorer версии 9 и ранее анимация не работает. Некоторые старые версии браузеров, такие как Safari 4–5, iOS Safari 3.2–5.1 и Android Browser 2.1–3, понимают анимацию только при использовании префикса -webkit- .
Далее в учебнике: свойства для запуска анимации — animation-name и animation-duration.
Источник
CSS правило @keyframes
Определение и применение
CSS правило @keyframes позволяет контролировать промежуточные этапы анимации путем создания ключевых кадров в процессе анимации. Это дает возможность точнее контролировать процесс анимации вручную, задавая для нее промежуточные шаги.
Чтобы использовать ключевые кадры, создается правило @keyframes с произвольным именем, которое впоследствии используется в свойстве animation-name, либо в универсальном свойстве animation для добавления списка ключевых кадров в анимацию.
Каждое правило @keyframes должно содержать список стилей для селекторов ключевых кадров, каждый из которых задаёт процент для анимации, при котором происходит ключевой кадр. Указать, когда происходит смена стиля необходимо в процентах ( 0% — это начало анимации, 100% — это когда анимация завершена), или с помощью ключевых слов «from» и «to» , которые соответствуют, как 0% и 100% . Для корректного проигрывания анимации, ключевые кадры должны содержать начало цикла и его конец (значения 0% | from и 100% | to ).
Допускается перечислять ключевые кадры в любом порядке, так как браузер их обрабатывает не в порядке размещения, а в зависимости от значения процента (от меньшего значения к большему). Если анимация имеет те же начальные и конечные свойства, то вы можете перечислить их через запятую: 0%, 100% <> .
Если по какой-то причине вы решили включить в правило свойства, которые не могут быть анимированы, то они будут проигнорированы браузером, а свойства, которые могут быть анимированы будут включены в анимацию.
Свойства, указанные в ключевом кадре со значением !important игнорируются. Ознакомиться, как происходит отмена значимости стилей ( !important ) вы можете в статье «Каскадность в CSS» (раздел «Нюансы конфликтов»).
Источник
Анимация в CSS3. Часть I
Изменения, появившиеся в CSS3, заслуживают особого внимания — с этим согласится каждый разработчик. Вещи, которые ранее приходилось реализовывать через PS и JavaScript, к примеру, теперь можно легко запрограммировать с CSS3.
Сегодня разговор пойдет о такой загадочной теме, как анимация. В наше время она как нельзя более актуальна, так как современные интерфейсы требуют высокой степени интерактивности и простоты, чего как раз и можно достичь с помощью грамотной CSS-анимации.
Анимация в CSS3
Анимация — это плавный переход элемента из одого состояния в другое с течением времени. И задать такое изменение теперь можно прямо в файле CSS. Если раньше приходилось для достижения этой цели писать довольно громоздкий код JavaScript (плюс этого метода в том, что данная анимация будет работать кроссбарузерно, то есть одинаково во всех браузерах), то сейчас мы можем описать анимацию в нескольких правилах CSS.
Что такое кейфрейм (keyframe)?
Для того, чтобы анимация работала необходимо использовать так называемые кейфреймы (keyframes) — «ключевые кадры», в переводе с английского.
Кейфрейм позволяет определить положение (состояние) элемента в определенный момент времени, кадра. Именно поэтому элемент становится анимированым, а создание кейфреймов — важная часть в создании анимации.
Анимация в CSS создается в два этапа: создание кейфреймов (keyframes) и использование их в правиле.
Давайте разберем по порядку.
Чтобы создать кейфрейм, необходимо прописать следующую конструкцию в CSS:
Внутри фигурных скобок мы, буквально, прописываем любое изменение элемента, то есть описываем действие кейфрейма. При помощи ключевых слов from и to мы даем браузеру понять, с какого свойства мы начинаем анимацию и каким свойством мы ее и окончим.
После ключевых слов from и to мы ставим фигурные скобки (открывающие и закрывающие, само собой). Именно здесь и начинается вся магия. В теле from мы прописываем свойства, которые определяют элемет до анимации, а в теле to — после анимации. Всё просто.
Например, если мы хотим переместить элемент вправо с 50px на 450px, то наш код будет таковым:
Стоит отметить, что это только полдела. Чтобы анимация заработала, необходимо привязать созданный кейфрейм к селектору, который будет подчиняться данным изменениям. Позволят нам связать анимацию и элемент свойства animation-name и animation-duration, которые устанавливают, какому кейфрейму будет соответствовать данный элемент и сколько времени займет анимация.
Предположим, мы хотим применить данный эффект к блоку .animate (который, конечно же, заранее прописан в разметке). Тогда код стилей будет выглядить таким образом:
@keyframes m <
from <
left: 50px;
>
to <
left: 450px;
>
>
.animate <
width: 50px;
height: 50px;
animation-name: m;
animation-duration: 1.5s /*После числа мы ставим «s» (секунды) или «ms» (миллисекунды), в зависимости от того, сколько времени потребуется на анимацию*/
>
Анимация CSS3 — довольно гибкий и мощный инструмент, который способен сделать любую статичную страницу красивой, наполненной движением и эффектами. Разумеется, нам предстоит познакомиться с большим количеством настроек, поэтому — до встречи в следующей части статьи.
А тем временем, удачи вам в веб-разработках!
Источник