Полезные ссылки для изучения CSS анимации / Habr
Мы начали наблюдать много экспериментов над CSS3 анимацией и статьи о ней в 2011-м, но тогда поддержка этой анимации была ограничена браузерами на вебките. В середине 2011-го Firefox 5 тоже получил эту поддержку, а также мы можем ожидать ее в следующей реинкарнации Internet Explorer (10), поэтому сейчас идеальное время, чтобы разобраться с синтаксисом@keyframes (покадровой анимации). Этот пост предлагает краткий обзор 10-ти статей, в которых объясняется, как использовать это клевое CSS3 свойство, с примерами и демками.CSS Анимация (CSS3 Animations)
Ищете базовую информацию по CSS3 анимации? Сайт W3 Schools обеспечит вас основными сведениями о правилах покадровой анимации @keyframes, поддержку браузерами, и различными доступными свойствами. Все это снабжено качественными и наглядными примерами.
Синтаксис покадровой анимации (Keyframe Animation Syntax)
Если вы уже знакомы с работой CSS3 анимации и вам нужна просто быстрая шпаргалка, то вам определенно стоит ознакомиться с соответствующей страницей на сайте Криса Койера CSS-Tricks. На ней можно найти множество примеров кода, который можно легко скопировать и вставить в свою таблицу стилей.
CSS3 Анимация (CSS3 Animations)
Ричард Бредшоу (Richard Bradshaw) составил крайне полезный сборник информации о различных аспектах CSS3 анимации. Страница по предлагаемой ссылке сфокусирована в основном на покадровой анимации @keyframes, но не пропустите также полезную информацию о переходах (transitions) и трансформациях (transforms) на том же сайте.
CSS Анимация: Принципы и Примеры (CSS Animation: Principles and Examples)
Эта углубленная статья на Smashing Magazine делает акцент на CSS3 анимацию, где используются традиционные принципы анимации, такие как сжимание и растяжение (‘squash and stretch’), которые помогают в создании более реалистических иллюзий.
Мастеркласс по CSS Анимации (A Masterclass in CSS Animation)
Net magazine предлагает тур по правилам и свойствам CSS3 анимации с использованием простых примеров, которые смогут в будущем помочь в создании интересных и прикольных эффектов.
Начинаем эксперименты над CSS3 Анимацией (Start Experimenting with CSS3 Animations)
Ли Мунро (Lee Munroe) был на высоте в 2010-ом, когда он опубликовал в своем блоке статью о CSS3 анимации. Его пример был сфокусирован на вендорных префиксих вебкита, но сам синтаксис остался неизменным. Свою статью он оканчивает, приводя примеры со всего интернета.
Звенящий колокольчик с помощью покадровой CSS-анимации (Ring a Bell with CSS Keyframe Animations)
Это может звучать как простой пример, но это демо с покадровой CSS анимацией от Inspect Element предлагает к использованию целый ряд различных свойств, которые способствуют реалистичной анимации.
Развлекаемся с CSS анимацией (Having Fun with CSS Animations)
Самули Хакониеми (Samuli Hakoniemi) создал хитрых, но эффективный способ создания анимации с использованием правил @keyframes. Кроме того, что движущиеся прямоугольники и скачущие шары идеально подходят для изучения, демо вроде этой смогут помочь придумать замечательные идеи для применения этих анимаций в практике на ваших проектах в вебе.
Пятиминутное руководство по CSS Анимации (The Five-Minute Guide to CSS Animations)
Предпоследняя статья из этой подборки принадлежит UBelly, который познакомил своих читателей с поддержкой CSS анимацией в Explorer 10 и предложил пятиминутной обзор основ терминологии.
Анимация с CSS: это легче, чем ты думаешь (Animation with CSS: It’s Easier Than You Think)
И наконец, хорошо отформатированная статья от Van SEO Design, которая предлагает обзор различных свойств и правил, которые вы возможно захотите использовать в вашей CSS анимации, и которая включает описание примеров кода для каждого из них.
CSS3 Анимация: 10 Впечатляющих примеров
Одни из лучших примеров CSS3 анимации.
Свойства CSS3 открыли огромное количество новых дверей для веб-разработчиков и дизайнеров, позволяя создавать анимацию и интерактивность прямо в CSS разметке, обходя стороной Flash, Silverlight или After Effects. Ниже мы собрали лучшие примеры CSS3 анимации, включая отдельные эффекты и сайты.
One Shared House – это веб-документалка об опыте UX дизайнера Ирен Перейры (Irene Pereyra), которая была частью феминистской коммуны в 1970-х годах в Амстердаме. Как только вы попадете на сайт, то будете не одни: за движениями вашего курсора будут следить.
Вместо банального скроллинга Перейра и ее портнер Антон Реппонен (Anton Repponen) черпали вдохновение из игры ‘Where in the World is Carmen Sandiego?’ ранних 90-х. Они использовали нижний экран, чтобы разделить контент, давая вам возможность по-совему определить уровень вовлечения в историю.
Взаимодействие сочетается с повествованием, чтобы придать завораживающий и новый опыт. Также важна смелость и упорство Перейры и Реппонена, которые вели этот само-финансируемый проект в течение двух лет: “Это позволяет нам эксперементировать с дисциплинами и техниками, для которых обычно нет места в клиентских проектах”, – говорит Перейра.
02. Type Terms
Type Terms – это анимированная шпаргалка, созданная Supremo – веб-дизайн агенством из Манчестера. Проделав некоторые исследования, они обнаружили, что самая интересная информация в сети о типографике представляет собой простые, статичные картинки. Команде нужен был повод для эксперемента с SVG и CSS анимацией, и это стало прекрасной возможностью.
“Я решил создать что-нибудь визуально привлекательное, что помогло бы помочь новым дизайнерам в изучении ключевых типографических правил”, – говорит дизайнер Дэн Хэйвуд (Dan Heywood).
Команда подчеркивает важность того, чтобы дизайнеры хорошо разбирались в типографике. Для тех, кто впервые изучает правила, или для опытных дизайнеров, нуждающихся в переподготовке, этот чит-лист является одновременно учебным и приятным для изучения. Контент сфокусирован, информация понятна, а CSS анимация гладкая и плавная.
03. Waaark
Любое взаимодействие на сайта Waaark открывает невероятное внимание к деталям. Арт директор Джимми Рахериарисоа (Jimmy Raheriarisoa) и фронтенд разработчик Антон Водняк (Antoine Wodniack), создавшие студию French, все продумали. Они распланировали как будут меняться сцены с одной страницы на другую, как меркнет текст и какой будет анимация для SVG графики.
Все воплощается в жизнь, сохраняя при этом производительность и доступность. Они добавили горячие клавиши, чтобы сделать опыт использования лучше для всех людей.
Отвечая на вопрос о своем недавно выпущенном портфолио, Водняк пояснил, что взаимодейсвие было ключевым моментом: «Интернет становится все более и более креативным, и становится необходимым образовывать творческий дуэт между разработчиком и дизайнером. Разработчикам всегда нужны новые испытания, а Дизайнеры нуждаются в решениях, чтобы сделать их идеи возможными ».
04. Periodic table
Периодическая таблица элементов – это популярный объект для дизайнеров, чтобы продемонстрировать новые веб технологии. Разработанная веб дизайнером из Барселоны Рикардо Кабелло (Ricardo Cabello) – эта таблица при первом запуске собирается из множества анимированных элементов.
Эту таблицу можно крутить в разных направлениях с помощью мышки. Также можно изменить форму таблицы внизу страницы.
Кабелло проэкспериментировал, сможет ли он использовать свою JavaScript библиотеку three.js, чтобы перенести эффекты из демо в игровой движок famo.us.
Кабелло также опубликовал видео, демонстрирующее работу демо на iPad 2:
05. CSS Creatures
Все мы знаем, что работа в дизайн индустрии иногда может стать монотонной, так что оторвитесь от своего расписания и повеселитесь с этим милым маленьким CSS проектом.
CSS Creatures позволяет пользователям создавать и анимировать для себя собственного веб-приятеля. Звучит здорово? Все что нужно сделать это отправить твит на @CSSCreatures с желаемым цветом, характером и функциями. Ваше CSS создание появится на сайте менее чем за 25 секунд!
06. AT-AT Walker from Star Wars
Эта иллюстрированная CSS3 анимация создана Энтони Калзадилла (Anthony Calzadilla). Кликните на “view the bones” ссылку на iPad и увидите, как кажая деталь двигается и функционирует.
07. GT America
Grill Type выпустил новый шрифт GT-America. Каждая часть этого сайта рассказывает историю о шрифте.
GT-America назван в честь страны, в которой черпал вдохновение, — Соединенных Штатов. Здесь более 40 анимаций, созданных дизайнером Джошем Шаубом (Josh Schaub). Вы даже можете взаимодействовать с сайтом, чтобы оживить иллюстрации. Нам нравится, как использовалась анимация и видео, чтобы показать невероятную гибкость шрифта.
08. Caaaaaaaat
Японский веб дизайнер и интерактивный директор Масаюки Кидо (Masayuki Kido) создал этого анимированного котика, который растягивается по ширине окна браузера. Сделайте окно достаточно узким и слово изменится с забавными последствиями. Это не все, что может предоставить сайт, но мы не хотим оставлять спойлеров – идите и посмотрите сами!
09. Greenwich Library
Обычно сайты публичных услуг не отличаются красотой и удобством, но сайт бибилиотеки Гринвича – исключение из правил. Дизайн этого сайта является результатом двух лет исследований, тестирования и разработки.
Наш самый любимый момент – это иллюзия отрисовки элементов при прокрутке. Обычно этот трюк создается с помощью SVG, но в данном случае использовались обычные CSS анимации и расслоение элементов, которые выглядят даже интереснее сложной SVG графики.
10. Interactive album covers
Многие обложки классических музыкальных альбомов не только были переделаны на CSS, но они даже реагируют на музыку! Демонстрация включает First Impressions от Stroke и Joy Division’s Unknown Pleasures. Важно: работает только в Google Chrome.
Читайте также:
Перевод статьи 10 impressive examples of CSS3 animation
Авторы оригинального текста: Aaron Kitney, Claudina Sarahe, Creative Bloq Staff
СSS3 Анимация
CSS3 Анимации
CSS3 анимации позволяют анимировать большинство HTML элементов без использования JavaScript или Flash!
CSS3
Поддержка браузера анимации
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номер, за которыми следуют -webkit-,-moz-,
или -o- указывает первую версию, которая работает с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9.0 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -o- |
| animation | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9.0 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -o- |
Что такое CSS3 анимация?
Анимация позволяет элементу постепенно переходить из одного стиля в другой.
Вы можете изменить, много свойств CSS, которые вы хотите изменить, много раз, сколько вы хотите.
Чтобы использовать анимацию CSS3, необходимо сначала указать некоторые ключевые кадры для анимация.
Ключевые кадры содержат стили элементов, которые будут иметь в определенное время.
Правило @keyframes
При указании стилей CSS3 внутри правила @keyframes,
анимация будет постепенно меняться от текущего стиля к новому стилю в определенное время.
Чтобы заставить анимацию работать, необходимо привязать анимацию к элементу.
Следующий пример связывает «example» анимацию с элементом <div>.
Анимация будет длиться 4 секунды, и она будет постепенно менять цвет фона элемента <div> с "red" на "yellow":
Пример
/* Код анимации */@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* Элемент, к которому применяется анимация */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Примечание: Свойство animation-duration определяет, сколько времени должна занимать анимация.
Если свойство animation-duration не указано,
анимации не будет, потому что значение по умолчанию — 0s (0 секунд).
"from" и "to" (что составляет 0% (начало) и 100% (в полном объеме)).Также можно использовать проценты. С помощью процентов можно добавить, сколько изменить стилей, как вам нравится.
Следующий пример изменит цвет фона элемента <div>,
когда анимация завершена на 25%, завершена на 50%,
и снова, когда анимация завершена на 100%:
Пример
/* Код анимации */@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* Элемент, к которому применяется анимация */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
<div>,
когда анимация завершена на 25%, завершена на 50%,
и снова, когда анимация завершена на 100%:Пример
/* Код анимации */@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Задержка анимации
Свойство animation-delay указывает задержку запуска анимации.
В следующем примере задержка запуска анимации составляет 2 секунды:
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Отрицательные значения допустимы. При использовании отрицательных значений, анимация начнется, как если бы он уже двигалась в течениеN секунд.
В следующем примере анимация начнется так, как если бы она уже была в движении, в течение 2 секунд:
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
Указать, сколько раз должна запускаться анимация
Свойство animation-iteration-count указывает количество запусков анимации.
В следующем примере анимация запускается 3 раза до остановки:
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
В следующем примере используется значение "infinite", чтобы анимация
продолжалась вечно:
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
Запуск анимации в обратном направлении или поочередно
Свойство animation-direction определяет
должна ли анимация воспроизводиться вперед, назад или поочередными циклами.
Свойство animation-direction может иметь следующие значения:
normal— Анимация воспроизводится в обычном режиме (вперед.) Это по умолчаниюreverse— Анимация воспроизводится в обратном направлении (назад.)alternate— Анимации сначала вперед, затем назадalternate-reverse— Анимации сначала назад, затем вперед
В следующем примере анимация выполняется в обратном направлении (назад):
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}
Следующий пример использует значение alternate , чтобы сделать анимацию
сначала движение вперед, затем назад:
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate;
}
Следующий пример использует значение alternate-reverse, чтобы сделать анимацию
сначала движение назад, затем вперед:
Пример
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
Указать скорость движение анимации
Свойство animation-timing-function определяет движение скорости
анимации.
свойство animation-timing-function может иметь следующие значения:
ease— Задает анимацию с медленным запуском, затем быстрее, затем медленно завершается (по умолчанию)linear— Задает анимацию с одинаковой скоростью от начала до концаease-in— Задает анимацию с медленным запускомease-out— Определяет анимацию с медленным концомease-in-out— Задает анимацию с медленным началом и концомcubic-bezier(n,n,n,n)— Позволяет определить собственные значения в функцииcubic-bezier
В следующем примере показаны некоторые из различных движений скорости, которые можно использовать:
Пример
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Указать режим заливки анимации
CSS3 анимации не влияют на элемент до первого кадра движения или после последнего ключевого кадра.
Свойство animation-fill-mode может переопределить это поведение.
Свойство animation-fill-mode задает
стиль целевого элемента, когда анимация не воспроизводится (до ее
начала, после того, как она заканчивается, или вместе).
Свойство animation-fill-mode может иметь следующие значения:
none— Значение по умолчанию. Анимации не будет применять любые стили к элементу до или после его выполненияbackwards— Элемент получит стиль значения, заданные первым ключевым кадром (зависит от направления анимации), и сохранить в течение периода задержки анимацииboth— Анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации в обоих ремарках
Следующий пример позволяет элементу <div> сохранить значения стиля
последнего кадра после окончания анимации:
Пример
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
В следующем примере элемент<div> получает значения стиля, заданным параметром
первого кадра перед началом анимации (в период задержки анимации):
Пример
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
В следующем примере элемент <div> получает набор значений стиля
по первому ключевому кадру перед началом анимации и сохранить значения стиля
от последнего ключевого кадра, когда заканчивается анимация:
Пример
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
Сокращение CSS3 свойств анимации
В приведенном ниже примере используются шесть свойств анимации:
Пример
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Тот же эффект анимации, что и выше, может быть достигнут с помощью сокращения свойств animation:
Проверьте себя с помощью упражнений!
Свойства CSS3 Анимации
В следующей таблице перечислены правила @keyframes и все свойства анимации CSS3:
| Свойство | Описание |
|---|---|
| @keyframes | Задает код анимации |
| animation | Сокращенное свойство для установки всех свойств анимации |
| animation-delay | Задает задержку запуска анимации |
| animation-direction | Указывает, должна ли анимация воспроизводиться вперед, назад или в других циклах |
| animation-duration | Определяет, сколько времени анимация должна занять для завершения одного цикла |
| animation-fill-mode | Задает стиль для элемента, когда анимация не воспроизводится (с начала, после окончания или оба) |
| animation-iteration-count | Указывает, сколько раз анимация должна воспроизводиться |
| animation-name | Задает имя анимации @keyframes |
| animation-play-state | Указывает, запущена или приостановлена анимация |
| animation-timing-function | Задает скорость движения анимации |
СSS3 Свойство animation
Пример
Привязка анимации к элементу <div>, используя свойство стенографии:
div
{
animation: mymove 5s infinite;
}
Определение и использование
Свойство animation сокращенное свойство для:
Примечание: Всегда указывайте свойство animation-duration, в противном случае длительность равна 0, и никогда не будет воспроизводиться.
| Значение по умолчанию: | нет 0 удобство 0 1 нормально не работает |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет. Читайте об animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.animation=»mymove 5s infinite» Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следуют -webkit-, -moz-, или -o- указывают первую версию, которая работает с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| animation | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9.0 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -o- |
CSS синтаксис
animation: имя длительности — timing-function, задержка — iteration-count, направление — fill-mode, play-state;
Значение свойств
| Значение | Описание |
|---|---|
| animation-name | Задает имя ключевого кадра, который требуется привязать к селектору |
| animation-duration | Указывает, сколько секунд или миллисекунд требуется для завершения анимации |
| animation-timing-function | Задает линию скорости анимации |
| animation-delay | Задает задержку перед запуском анимации |
| animation-iteration-count | Указывает, сколько раз должна воспроизводиться анимация |
| animation-direction | Указывает, должна ли анимация воспроизводиться в обратном порядке на альтернативных циклах |
| animation-fill-mode | Указывает, какие значения применяются анимацией вне времени ее выполнения |
| animation-play-state | Указывает, выполняется ли анимация или приостановлена |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте об initial |
| inherit | Наследует это свойство от родительского элемента. Читайте об inherit |
Связанные сраницы
CSS учебник: CSS Анимации
HTML DOM справочник: Свойство animation