что такое keyframes css

CSS3 сейчас — анимация, прозрачность и многое другое (часть 2)

Keyframe

В настоящий момент поддержка такой анимации существует только в браузерах на базе WebKit — Chrome и Safari. Но тема настолько интересна, что стоит её рассмотреть — ведь будущее не за горами, и скоро вслед за Хромом подтянутся и другие браузеры.

Первум пунктом в создании CSS анимации идёт создание keyframe’ов (ключевых кадров). Вообще, Keyframe представляет собой набор правил, которые будут применяться в течение анимации. можно провести грубое сравнение keyframes с функциями — сначала мы объявляем ключевые кадры, и затем вызываем эту анимацию в любом месте CSS.

Сделаем пример простейшей анимации — при наведении на мячик он начинает прыгать.
Мячик:

Теперь создадим ключевые кадры:

Сначала мы задаем имя нашей анимации — в примере это будет «bounce». Затем мы описываем ключевые кадры анимации:
0% < bottom: 0; >— в начале мячик находится на исходной позиции;
50% < bottom: 100px; >— в середине анимации мячик достигает максимальной высоты;
100% < bottom: 0; >— к концу анимации мячик падает на исходное место.

Готово! Наш мячик скачет, аки колобок! А теперь посмотрите на этот пример. Комбинация box-shadow и keyframes даёт нам замечательный эффект подсветки формы для акцентирования внимания. Его можно использовать, например, при проверке форм для подсветки ошибочных полей.
Код пульсирующей формы:

В коде заметен обещанный rgba(). Как многим уже стало ясно, это цветовая модель RGB + альфа-канал, что позволяет нам задавать полупрозрачность там, где это требуется.

Opacity

А вот это свойство уже можно использовать на всю катушку — оно работает во всех браузерах, кроме нашего любимого. Правда, для IE есть следующий фикс:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
Вот пример полупрозрачной кроссбраузерной кнопки:

Для тех, кто еще не знает — есть замечательная вещь CSS3Pie — она позволяет нам использовать закругленные углы, тень и градиенты уже сейчас и абсолютно кроссбраузерно: IE 6-8, Chrome, Safari, Mozilla, Opera! Пример кроссбраузерного использования всех этих свойств:

Спасибо за внимание и приятной вам вёрстки!

Источник

Анимация CSS через keyframes, без воды и максимально просто

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

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

Ещё смотрите статью Делаем простую анимацию через CSS transition, там вы научитесь делать анимацию используя transition.

Базовая работа с @keyframes:

Для начала надо научится с ним работать базова, самые основы так сказать и понять в чём его суть, CSS анимация через keyframes, работает достаточно интересно.

Суть работы с @keyframes:

Суть работы с ним заключаться в том, что он сам @keyframes, просто задаёт когда и какое свойство нужно изменить и всё, для настройки времени анимации или сколько раз она будет проигрываться, используется свойства «animation-…».

Свойства «animation-…» для @keyframes:

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

Это ещё не все свойства, ниже будут ещё, здесь только самые базовые.

Пример работы с @keyframes:

Для примера будет показан блок div, виде квадрата, с помощью анимации будем его изменять, как его создавать в HTML показывать не буду, если вы читаете эту статью, думаю вы уже умеете это делать.

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

Разбор кода:

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

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

Теперь что касается самой анимации, задаётся слово @keyframes, после него идёт имя анимации.

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

Что касается 50%, то это какие свойства будут использоваться, когда анимация проигралась на 50%, можно использовать 30%, 20%, 70%, это не важно, главное чтобы не меньше 0% и не больше 100%.

В to это конечное значение, какие свойства должны быть когда анимация закончит проигрываться, также его можно заменить 100%.

Более подробная работа с @keyframes:

В этой части статьи будут только новые свойства «animation-…» и всё, новых способов работы с @keyframes не будет.

Ещё больше свойств «animation-…» для @keyframes:

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

Пример более продвинутой работы с @keyframes:

Почти точно такой же блок div мы создаём и работаем с ним.

Источник

Использование CSS-анимации

Experimental: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

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

Есть три преимущества CSS-анимации перед традиционными способами:

Конфигурирование анимации

Свойство animation имеет следующие подсвойства:

Определение последовательности анимации с помощью ключевых кадров

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

Примеры

Скольжение текста

Этот простой пример анимирует скольжение текста в элементе

от правого края окна браузера.

В стиле для элемента

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

Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок

приплывает к левому краю окна браузера.

(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)

Добавление других ключевых кадров

Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.

(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)

Настройка повторения

Движение текста вправо и влево

Итак, мы настроили повторение, но получили нечто странное: текст при каждом повторении снова «запрыгивает» за край окна браузера. То, чего мы хотим, так это чтобы текст двигался влево и вправо. Этого легко достичь с помощью установки свойству animation-direction значения alternate :

Использование шорткодов

Шорткод animation полезен для экономии места в коде. Например, правило, которое мы используем в этой статье:

Внимание: подробнее об этом на странице раздела animation

Установка нескольких значений свойствам анимации

CSS-свойство анимации может иметь несколько значений, разделённых запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.

В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений — по одному. В этом случае у всех трёх анимаций одинаковая продолжительность и число повторений:

Во втором примере установлены три значения для каждого из свойств. В этом случае каждая анимация выполняется с соответствующими по порядку значениями в каждом свойстве, так, например, fadeInOut имеет продолжительность 2.5 с и количество повторений 2, и т.д.

В третьем примере определены три значения имени анимации, но два значения продолжительности и количества повторений. В случае, когда количества значений недостаточно для каждой анимации, значения берутся циклически от начала до конца. Например, у fadeInOut длительность будет 2.5s, а moveLeft300px — 5s. Значения продолжительности закончились, теперь они берутся сначала — bounce получит продолжительность 2.5s. Значение количества повторений (а также другие указанные свойства) будет определено таким же образом.

Использование событий анимации

Мы будем модифицировать текст, чтобы выводить некоторую информацию о каждом событии анимации. Так мы сможем увидеть, как она работает.

Добавление CSS

Добавление обработчика события анимации

Будем использовать JavaScript для отслеживания всех трёх возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.

Почему? Потому что в нашем случае событие animationstart происходит как только анимация стартует, и это происходит раньше, чем исполняется наш сценарий. Так мы сможем контролировать начало анимации самостоятельно посредством вставки класса «slidein» для анимируемого элемента.

Регистрация событий

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

Ради полноты картины приведём код разметки HTML. В разметке имеется тег ul, в который и выводится вся информация:

Источник

Анимация в CSS3. Часть I

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

Анимация в CSS3

Что такое кейфрейм (keyframe)?

Анимация в CSS создается в два этапа: создание кейфреймов (keyframes) и использование их в правиле.

Давайте разберем по порядку.

Чтобы создать кейфрейм, необходимо прописать следующую конструкцию в CSS:

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

Например, если мы хотим переместить элемент вправо с 50px на 450px, то наш код будет таковым:

Стоит отметить, что это только полдела. Чтобы анимация заработала, необходимо привязать созданный кейфрейм к селектору, который будет подчиняться данным изменениям. Позволят нам связать анимацию и элемент свойства animation-name и animation-duration, которые устанавливают, какому кейфрейму будет соответствовать данный элемент и сколько времени займет анимация.

@keyframes m <
from <
left: 50px;
>
to <
left: 450px;
>
>
.animate <
width: 50px;
height: 50px;
animation-name: m;
animation-duration: 1.5s /*После числа мы ставим «s» (секунды) или «ms» (миллисекунды), в зависимости от того, сколько времени потребуется на анимацию*/
>

А тем временем, удачи вам в веб-разработках!

Источник

Правило @keyframes

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

Представим, что мы хотим создать примитивную двухкадровую анимацию, в которой один цвет фона (красный) меняется на другой (зеленый). Мы запишем правило в таком виде:

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

Запись 50% означает, что фон станет желтым ровно в середине анимации. По такому принципу можно добавлять сколько угодно ключевых кадров — просто используйте необходимое число в процентах (30%, 60%, 75% и так далее). Позже, когда будет задана длительность анимации, станет понятно, сколько времени пройдет до появления желтого цвета. К примеру, если вы установите длительность в размере 6 секунд, то желтый цвет фона появится через 3 секунды после старта анимации.

Разумеется, можно указывать в одном кадре несколько CSS-свойств. Например, чтобы сместить наш элемент вниз на 50 пикселей к середине анимации, и еще на 50 пикселей — к концу анимации, следует записать:

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

Таким образом мы создадим эффект паузы на временном отрезке с 33% до 66%.

Ключевые слова from и to равнозначны процентным записям 0% и 100% соответственно. Вам не обязательно начинать анимацию с 0% и заканчивать на 100%. Ее можно запускать позже и завершать раньше, при этом добиваясь интересных эффектов.

Кроссбраузерность

Далее в учебнике: свойства для запуска анимации — animation-name и animation-duration.

Источник