К этому моменту вы, наверное, слышали хоть что-то о анимации в CSS3 использованием ключевых кадров на основе синтаксиса. CSS3 анимации module в спецификации была вокруг в течение нескольких лет, и у него есть потенциал, чтобы стать большой частью веб-design.
Использование CSS3 ключевых кадров анимации, разработчики могут создавать гладкие, в сопровождении анимации, которые выполняют сравнительно хорошо и что не требуется кипы сценариев.Это просто еще один способ, что CSS3 помогает решать реальные проблемы в элегантной манере.Если вы еще не начали изучать синтаксис CSS3 анимации, вот ваш шанс подготовиться к этому, когда часть CSS3 спецификации проходит мимо рабочая draft stage.
В этой статье мы рассмотрим все важные части синтаксиса, и мы будем заполнить Вас на поддержку браузера, так что вы будете знать, когда начать использовать it.
Простые анимированные пейзаж Scene
Для целей данной статьи, я создал простой анимированной сцены пейзаж ввести различные аспекты синтаксиса.Вы можете посмотреть демо page, чтобы получить представление о том, что я буду описывать.Страница содержит боковой панели, которая отображает код CSS, используемый для различных элементов (солнце, луна, небо, землю и облака).Иметь быстрый взгляд, а затем следовать, как я описывать различные части CSS3 анимации module.
(ПРИМЕЧАНИЕ: версии Safari до 5,1 есть ошибка, которая предотвращает анимации из отделочных правильно Подробнее в разделе “ Animation’ S Fill Mode”).
Я опишу CSS связаны с лишь одним из элементов: анимированные ВСЭто должно быть достаточно, чтобы дать вам хорошее понимание ключевых кадров на основе анимации.Для других элементов в демо-версии, Вы можете изучить код на демо-страницу с помощью tabs.
@ Ключевыми кадрами на-Rule
Первая необычная вещь, которую Вы заметите о любом коде анимации CSS3 является keyframes @ правило.Согласно спецификации, это специализированные CSS правило @ следуют идентификатор (по выбору разработчика), который упоминается в другую часть CSS.
@ Правило и его идентификатор, затем последовал целый ряд наборов правил (например, правил стиля с декларацией блоков, как и в обычном коде CSS).Этот кусок наборов правил ограничен в фигурные скобки, которые гнездятся правило устанавливает внутри правило @, сколько вы бы найти с другой @ rules.
Вот правила @ мы будемс помощью:
@keyframes sunrise {
/* rule sets go here … */
}
Слово sunrise является идентификатором наш выбор, который мы используем для обозначения этого animation.
Обратите внимание, что я использую не использует префиксы для всех примеров кода здесь и в демо.Я буду обсуждать поддержки браузера в конце этой статьи, а сейчас просто понимают, что в настоящее время ни один браузер поддерживает этот стандарт синтаксиса, так, чтобы получить код работает, вы должны включать в себя все поставщику prefixes.
Keyframe Selectors
Давайте добавим несколько наборов правил внутри правило @:
@keyframes sunrise {
0% {
bottom: 0;
left: 340px;
background: #f00;
}
33% {
bottom: 340px;
left: 340px;
background: #ffd630;
}
66% {
bottom: 340px;
left: 40px;
background: #ffd630;
}
100% {
bottom: 0;
left: 40px;
background: #f00;
}
}
С добавлением этих новых наборов правил, мы ввели ключевой кадр селектора.В примере выше, ключевой кадр селекторы 0% 33% 66%, а 100%.0% и 100% селекторов можно было бы заменить слово “от” и “до”, соответственно, и вы получите тот же results.
Каждая из четырех наборов правил в этом примере представляет собой отдельный снимок анимированных элементов, со стилями определяющих внешний вид элемента в этой точке в анимации.Точки, которые не определены (например, с 34% до 65%) составляют переходный период определен styles.
Хотя спецификация еще находится в разработке, некоторые правила были определены, что агенты пользователя должны следовать.Например, порядок ключевых кадров действительно не имеет значения.Ключевые кадры будут играть в порядке, установленном процентных значений, и не обязательно том порядке, в котором они появляются.Таким образом, если вы поместите “до” ключевого кадра до “от” ключевого кадра, анимация будет по-прежнему играть так же.Кроме того, если “до” или “с” (или в процентном отношении эквивалент) не объявлены, браузер автоматически создаст его.Таким образом, правило устанавливает внутри правило @ не регулируются каскада, которые вы найдете в обычных правил CSS sets.
Анимации ключевые кадры, которые Sun
Для анимации солнца в этом демо, я определил четыре ключевых кадров.Как уже упоминалось, выше код содержит комментарии, которые описывают changes.
В первый ключевой кадр, солнце красное (как если бы это были просто восходящего или заходящего), и он расположен под землю (т.е. не видно).Естественно, сам элемент должен быть расположен относительно или абсолютно для того, чтобы left и bottom значения не будет иметь эффекта.Я также использовал Z-index укладывать элементы (чтобы убедиться, например, что земля находится выше солнца).Обратите внимание, что только стили показаны в ключевые кадры стилей, которые анимированы.Другие стили (например, z-index и position, которые не анимационные) были объявлены в другом месте в таблице стилей и поэтому не показано here.
0% {
bottom: 0; /* sun at bottom */
left: 340px; /* sun at right */
background: #f00; /* sun is red */
}
Около трети пути в анимации (33%), Солнце находится на той же горизонтальной плоскости, но возросла и изменилась до желто-оранжевого (для представления полного дневного света):
33% {
bottom: 340px; /* sun rises */
left: 340px;
background: #ffd630; /* changes color */
}
Затем, на две трети ванимация (66%), солнце перемещается влево около 300 пикселей, но остается на той же вертикальной плоскости.Обратите внимание на что-то другое в 66% ключевой кадр: я повторила ту же цвета из 33% ключевой кадр, чтобы солнце от изменения обратно в красном слишком early.
66% {
bottom: 340px;
left: 40px; /* sun moves left across sky */
background: #ffd630; /* maintains its color */
}
Наконец, солнце постепенно оживляет его конечное состояние (полный красный), как он исчезает под ground.
100% {
bottom: 0; /* sun sets */
left: 40px;
background: #f00; /* back to red */
}
Связь Анимация имя с Element
Вот следующий кусок кода, мы добавим в нашем примере.Он связывает имя анимации (в данном случае, слово sunrise) с определенным элементом в нашей HTML:
#sun.animate {
animation-name: sunrise;
}
Здесь мы представляем animation-name собственность.Значение этого свойства должно соответствовать идентификатору в существующей @keyframes правило, в противном случае анимация будет происходить.В некоторых случаях, вы можете использовать JavaScript, чтобы установить его значение на none (только ключевые слова, которые были зарезервированы для этого свойства), чтобы предотвратить анимации из occurring.
Объект, который мы таргетинг элемент с идентификатором sun и класс animate.Причина, я удвоил идентификатор и класс, как это так, что я могу использовать сценарии, чтобы добавить имя класса animate.В демо, я начал странице статически, а затем, с помощью нажатия одной кнопки, все элементы с определенным именем класса будет иметь другой класс прилагается называется animate.Это вызовет все анимации в то же время и позволит анимации, которая контролируется user.
Конечно, это только один способ сделать это.Как и в случае с чем в CSS или JavaScript, есть и другие способы сделать то же thing.
Анимации продолжительность и сроки Function
Давайте добавим еще две линии нашего CSS:
#sun.animate {
animation-name: sunrise;
animation-duration: 10s;
animation-timing-function: ease;
}
Вы можете указать длительност …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров