Animation css примеры. Использование CSS-анимации
Результат данного урока работает в браузерах Safari, Chrome, Opera, Firefox, начиная с версии 4 (где увидите трансформации, но без анимации). Также, с помощью браузерного префикса -ms-, вы сможете увидеть положительные результат в IE, начиная с 9ой версии.
Для реализации CSS анимации необходимо выставить специальные настройки трансформации, которые будут реагировать на события мыши. Также необходимо указать специальную функцию, которая будет отвечать за время выполнения анимации.
Для работы трансформаций в Firefox и Opera просто замените префикс -webkit на -moz и -o. Для IE - на -ms.
1. Введение в CSS трансформации
CSS трансформации используют для изменения вида, поворота и других преобразований элемента. Все эти настройки выставляются в обычных таблицах стилей, и когда вы открываете страницу, то уже видите готовый результат трансформации. Для того чтобы увидеть само преобразование из одного вида в другой (анимацию трансформации), к элементу можно прикрутить какое-то событие (например, событие mouseover);
В примере, указанном ниже, мы расположили 4 абсолютно одинаковых div-а с рамкой в 2px. Для трансформации данных элементов в браузерах, работающих на webkit, добавляем префикс -webkit-transform:
Без данных трансформаций div-ы будут выглядеть абсолютно одинаково.
2. Анимация
Для анимации трансформаций в Webkit браузерах можно воспользоваться префиксом -webkit-transition. Демонстрация представлена ниже:
Перед вами 4 одинаковых div-а. Для запуска анимации необходимо подвести/отвести мышь. При всём при этом, никакого JavaScript. Только HTML и CSS.
CSS анимация может применяться не только к трансформациям, но также и к другим свойствам, таким как прозрачность, цвет и многое другое. Это продемонстрировано в следующем примере. Один элемент преобразуется в другой и наоборот:
Опять же, мы используем только HTML и CSS. В данном случае, изменяем настройки border-color, border-radius.
4. Множественные трансформации на одном элементе
Для применения множественных трансформаций к одному и тому же элементу просто перечислите настройки через пробел. К примеру:
Данные настройки при наводке мыши за 1 секунду изменят цвет под-меню, повернут его, увеличат в размере.
4. Анимация в действии
Вот ещё один интересный пример комбинирования различного рода трансформаций в одной анимации:
Данный пример может работать не очень хорошо в Safari 3 и в ранних версиях Opera.
Блок, окружённый точечной рамкой, который появляется во время проигрывания анимации, отображает позицию элемента div. Его мы просто смещаем, а его содержание поворачиваем. Всё просто!
Для создания более сложной анимации, необходимо воспользоваться специальными ключевыми кадрами .
5. Использование различных видов анимации
В этом примере, мы добавим несколько преобразований элемента, каждый из которых будет проигран в указанный промежуток времени.
При событии:hover, синий квадрат, повернётся, поменяет цвет на красный, и передвинется из верхнего левого угла в правый нижний.
Первое, что вы наверное должны были заметить, так это особенность передвижения квадрата. Теперь оно не резкое, а более “изогнутое”. Всё благодаря функциям ease-out и ease-in.
Также обратите внимание, что изменение цвета происходит до поворота.
Фишка в том, что вы можете разбить -webkit-transition на несколько записей:
#block { ... background: blue; ... -webkit-transition-property: left, top, background, -webkit-transform; -webkit-transition-duration: 2s, 2s, 1s, 1s; -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out; -webkit-transition-delay: 0, 0, 0, 1s; ... } #stage:hover #block { left: 100px; top: 100px; background: red; -webkit-transform: rotate(360deg); }
6. Событие одного элемента преобразует другой
Многих наверное заинтересует подобный функционал: клик на один элемент вызывает преобразование другого. В CSS этого можно достичь, воспользовавшись селекторами >, + и ~.
Вот и соответствующий пример:
В этом примере мы воспользовались знаком +, чтобы взаимодействовать с #box1 и #box2. ~ может использоваться для получения доступа к элементам, которые находятся где-то далеко от элемента, ожидающего события.
#box2 { position: absolute; left: 120px; ... background: blue; ... } #box1:hover + #box2 { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); left: 627px; background: yellow; }
В то же время, мы можем анимировать и первый блок:
Недостаток данных примеров только в том, что они не работают (или работают криво) в более ранних версиях браузеров.
Спасибо Niall за предложенный урок!
| 18.02.2016
CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.
Удивительно, как простые вещи могут оживить обычную веб-страницу, сделать ее более доступной для восприятия пользователями. Речь идет о CSS3 переходах, с помощью которых можно позволять элементу трансформироваться и изменять стиль, например, при наведении курсора. Девять примеров CSS3 анимации, которые доступны ниже, помогут создать на сайте атмосферу отзывчивости, а также улучшить общий вид страницы благодаря красивым плавным переходам.
Для более детального ознакомления вы можете скачать архив с файлами.
Все эффекты работают с помощью свойства transition (англ. transition - «переход», «превращение») и псевдокласса:hover , который определяет стиль элемента при наведении на него курсора мыши ( в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.
Body > div { width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; transition: all 0.3s ease; }
1. Изменение цвета при наведении курсора
Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс:hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:
Color:hover { background:#53ea93; }
2. Появление рамки
Интересная и яркая трансформация - внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс:hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px) и её цвет:
Border:hover { box-shadow: inset 0 0 0 23px #53ea93; }
3. Свинг
Данная CSS анимация - исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:
- @keyframes - базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
- animation и animation-iteration-count - свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.
4. Затухание
Эффект плавного затухания - это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 - то есть полная непрозрачность, после чего указать её значение при наведении мыши - 0.6:
Fade { opacity: 1; } .fade:hover { opacity: 0.6; }
Для противоположного результата поменяйте значения местами:
5. Увеличение
Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:
Grow:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
6. Уменьшение
Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:
Shrink:hover { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); }
7. Трансформация в круг
Одна из часто используемых анимаций - прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с:hover и transition , это можно реализовать без проблем:
Circle:hover { border-radius: 70%; }
8. Вращение
Забавный вариант анимации - поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением - rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:
Rotate:hover { -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); }
9. 3D тень
Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):
Threed:hover { box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX(-7px); transform: translateX(-7px); }
Поддержка браузерами
На сегодняшний день свойство transition поддерживается следующими браузерами:
| Десктопные браузеры | |
|---|---|
| Internet Explorer | Поддерживается версией IE 10 и выше |
| Chrome | Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit-) |
| Firefox | Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz-) |
| Opera | Поддерживается с версии 12.1 |
| Safari | Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit-) |
Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.
Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!
ВНИМАНИЕ! Поскольку в этом уроке мы с вами разберем анимацию, на картинках я вам пример ее работы продемонстрировать не смогу, поэтому смело открывайте редактор для кода и записывайте туда код, приведенный в этот статье.
Основы создания
Итак, прежде всего нужно начать с того, как ее создавать. Вы наверняка привыкли к тому, что любая вещь в css реализуется прописыванием нужному селектору нужных свойств с соответствующими значениями. Так вот, при создании анимации только этим не обойтись. Схема выглядит следующим образом:
Создаются сами эффекты переходов с помощью @keyframes
Нужному элементу задается эта самая анимация, а также ее параметры (все это с помощью свойств и их значений).
Итак, для начала нам нужно описать нужные изменения в @keyframes, давайте подробнее разберем, как с ними работать.
Синтаксис @keyframes
Собственно, мне проще будет объяснить вам все на готовом примере, пусть и очень простом. Вот он (код добавляется в css-файл):
@keyframes pulse{ 0%{font-size: 50px;} 50%{font-size: 60px;}} 100%{font-size: 50px;}}
@ keyframes pulse { 0 % { font - size : 50px ; } 50 % { font - size : 60px ; } } |
Итак, после ключевика @keyframes идет произвольное слово, которое будет выступать названием анимации. В нашем случае это “pulse”. Далее открываются фигурные скобки, в которых записываются нужные правила.
Проценты, это так называемые временные отметки, на которых к элементу будут добавляться указанные свойства. В нашем случае записанное означает следующее: в самом начале выполнения размер шрифта будет составлять 50 пикселей, в ее середине он увеличиться до 60-ти, а в конце опять уменьшиться до начального размера.
Ключевые слова from и to могут заменить процентную запись, они обозначают 0% и 100% соответственно, то есть начало и конец воспроизведения.
Применяем анимацию в действии
Пока у нас просто код, который формирует анимационный эффект, но он нигде не применяется. Если вы обновите вашу веб-страницу, на ней ничего не изменится. Соответственно, чтобы применить анимацию, нужно выполнить два действия:
Выбрать элемент, для которого она будет применяться
Связать его с правилами, описанными через @keyframes (посредством имени), а также задать дополнительные настройки если это будет необходимо.
Пробуем
В своем html-файле я создал блок с классом shadow, в котором располагается простая строка текста. Наша цель – применить анимационные эффекты, описанные нами ранее, к этому текстовому элементу.
Есть два обязательных свойства, которые нужно указать в таком случае, чтобы все заработало. Во-первых, это имя, которое мы писали в keyframes. Во-вторых, это длительность анимации, потому что без этого параметра браузер просто не сможет ее воспроизвести.
Итак, помимо тех стилей, что уже есть у нашего блока, добавляем новые:
animation-name: pulse; animation-duration: 2s;
Таким образом, все повториться 4 раза, после чего прекратиться. Как вы понимаете, вместо четырех можно вписать любое число.
Бесконечная анимация в css3
Реализуется очень легко с помощью этого же свойства. На самом деле вы можете просто задеть количество повторений в пару тысяч, этого вполне хватит, но теоретически наша анимация не будет повторяться бесконечно.
animation-iteration-count: infinite;
animation - iteration - count : infinite ; |
Все, теперь мы сделали бесконечный повтор. Проверять так ли это, просидев всю жизнь за монитором, я не советую. Просто это применяется в тех случаях, когда вы хотите, чтобы эффект постоянно повторялся и не исчезал. Если он ненавязчивый и не отвлекает пользователя, то почему бы и нет.
Задержка перед началом
По умолчанию воспроизведение начинается после полной загрузки страницы. Этим поведением можно управлять с помощью свойства animation-delay. Его значение задается в секундах.
Направление
Еще одно интересное свойство – animation-direction. По умолчанию стоит как нормальное, если поставить reverse, то все описанные кадры будут выполняться в обратном направлении. Давайте проверим, в чем разница. Для этого я немного изменил эффект, добавив еще один кадр.
@keyframes pulse{ 0%{font-size: 50px;} 50%{font-size: 60px;} 70%{font-size: 80px;} 100%{font-size: 50px;}}
@ keyframes pulse { 0 % { font - size : 50px ; } 50 % { font - size : 60px ; } 70 % { font - size : 80px ; } 100 % { font - size : 50px ; } } |
Итак, при нормальном направлении в первой половине анимации размер шрифта увеличиться до 60 пикселей, потом он резко увеличиться еще раз, уже до 80-ти, после чего вернется в исходное положение.
Рис. 2. Исходный размер текста
Рис. 3. Размер шрифта почти в конце анимации, перед резким возвращением к исходному состоянию.
Теперь задаем:
animation-direction: reverse;
animation - direction : reverse ; |
Все перевернулось наоборот. Сначала текст увеличиться аж на 30 пикселей, до 80-ти, оставшуюся часть анимации он будет плавно уменьшаться, в конце концов вернув себе прежние размеры. Все просто.
Форма анимации
А это, пожалуй, одна из самых интересных настроек, в экспериментах с которой можно провозиться долгое время. По умолчанию все изменения выполняются с одинаковой скоростью. Такой тип выполнения анимации называется линейным, кроме него есть и другие.
24.08.2017
Одни из лучших примеров CSS3 анимации.
Свойства CSS3 открыли огромное количество новых дверей для веб-разработчиков и дизайнеров, позволяя создавать анимацию и интерактивность прямо в CSS разметке, обходя стороной Flash, Silverlight или After Effects. Ниже мы собрали лучшие примеры CSS3 анимации, включая отдельные эффекты и сайты.
01. One Shared House
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 .
- Читайте также:
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.
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов:before и:after . Список анимируемых свойств приведен на странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
Введение в CSS-анимацию
Поддержка браузерами
IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: —
Android Browser: 44, 4.1 -webkit-
Chrome for Android: 44
1. Правило @keyframes
Создание анимации начинается с установки ключевых кадров правила @keyframes . Кадры определяют, какие свойства на каком шаге будут анимированы. Каждый кадр может включать один или более блоков объявления из одного или более пар свойств и значений. Правило @keyframes содержит имя анимации элемента, которое связывает правило и блок объявления элемента.
@keyframes shadow { from {text-shadow: 0 0 3px black;} 50% {text-shadow: 0 0 30px black;} to {text-shadow: 0 0 3px black;} }
Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если кадры имеют одинаковые свойства и значения, их можно объединить в одно объявление:
@keyframes move { from, to { top: 0; left: 0; } 25%, 75% {top: 100%;} 50% {top: 50%;} }
Если 0% или 100% кадры не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимируемого свойства. Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего.
После объявления правила @keyframes , мы можем ссылаться на него в свойстве animation:
H1 { font-size: 3.5em; color: darkmagenta; animation: shadow 2s infinite ease-in-out; }
Не рекомендуется анимировать нечисловые значения (за редким исключением), так как результат в браузере может быть непредсказуемым. Также не следует создавать ключевые кадры для значений свойств, не имеющих средней точки, например, для значений свойства color: pink и color: #ffffff , width: auto и width: 100px или border-radius: 0 и border-radius: 50% (в этом случае правильно будет указать border-radius: 0%).
2. Название анимации animation-name
Свойство задаёт имя анимации. Имя анимации создаётся в правиле @keyframes . Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно или несколько слов, связанных между собой при помощи пробела - или символа нижнего подчеркивания _ . Свойство не наследуется.
Синтаксис
Div {animation-name: mymove;}
3. Продолжительность анимации animation-duration
Свойство устанавливает продолжительность анимации, задаётся в секундах или миллисекундах, отрицательные значения не допустимы. Не наследуется. Если для элемента задано более одной анимации, то можно установить разное время для каждой, перечислив значения через запятую.
Синтаксис
Div {animation-duration: 2s;}
4. Временная функция animation-timing-function
Свойство определяет изменение скорости от начала до конца анимации с помощью временных функций. Задаётся при помощи ключевых слов или кривой Безье cubic-bezier(x1, y1, x2, y2) . Не наследуется.
| animation-timing-function | |
|---|---|
| Значения: | |
| ease | Функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1) . |
| linear | Анимация происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1) . |
| ease-in | Анимация начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1) . |
| ease-out | Анимация начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1) . |
| ease-in-out | Анимация медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1) . |
| cubic-bezier(x1, y1, x2, y2) | Позволяет вручную установить значения от 0 до 1. вы сможете построить любую траекторию скорости изменения анимации. |
| step-start | Задаёт пошаговую анимацию, разбивая анимацию на отрезки, изменения происходят в начале каждого шага. Эквивалентно steps(1, start) . |
| step-end | Пошаговая анимация, изменения происходят в конце каждого шага. Эквивалентно steps(1, end) . |
| steps(количество шагов,start|end) | Ступенчатая временная функция, которая принимает два параметра. Количество шагов задается целым положительным числом. Второй параметр необязательный, указывает момент, в котором начинается анимация. Со значением start анимация начинается в начале каждого шага, со значением end - в конце каждого шага с задержкой. Задержка вычисляется как результат деления времени анимации на количество шагов. Если второй параметр не указан, используется значение по умолчанию end . |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
Div {animation-timing-function: linear;}
С помощью пошаговой анимации можно создавать интересные эффекты, например, печатающийся текст или индикатор загрузки.
5. Анимация с задержкой animation-delay
Свойство игнорирует анимацию заданное количество времени, что даёт возможность по отдельности запускать каждую анимацию. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки.
Чтобы анимация началась с середины, нужно задать отрицательную задержку, равную половине времени, установленном в animation-duration . Не наследуется.
Синтаксис
Div {animation-delay: 2s;}
6. Повтор анимации animation-iteration-count
Свойство позволяет запустить анимацию несколько раз. Значение 0 или любое отрицательное число удаляют анимацию из проигрывания. Не наследуется.
Синтаксис
Div {animation-iteration-count: 3;}
7. Направление анимации animation-direction
Свойство задает направление повтора анимации. Если анимация повторяется только один раз, то это свойство не имеет смысла. Не наследуется.
Синтаксис
Div {animation-direction: alternate;}
8. Краткая запись анимации
Все параметры воспроизведения анимации можно объединить в одном свойстве — animation , перечислив их через пробел:
Animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
Для воспроизведения анимации достаточно указать только два свойства — animation-name и animation-duration , остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay .
9. Проигрывание анимации animation-play-state
Свойство управляет проигрыванием и остановкой анимации. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте JavaScript. Также можно останавливать анимацию при наведении курсора мыши на объект — состояние:hover . Не наследуется.
Синтаксис
Div:hover {animation-play-state: paused;}
10. Состояние элемента до и после воспроизведения анимации animation-fill-mode
Свойство определяет порядок применения определенных в @keyframes стилей к объекту. Не наследуется.
| animation-fill-mode | |
|---|---|
| Значения: | |
| none | Значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации. |
| forwards | После того, как анимация заканчивается (как определено значением animation-iteration-count), анимация будет применять значения свойств к моменту окончания анимации. Если animation-iteration-count больше нуля, применяются значения для конца последней завершенной итерации анимации (а не значения для начала итерации, которое будет следующим). Если значение animation-iteration-count равно нулю, применяемыми значениями будут те, которые начнут первую итерацию (так же, как и в режиме animation-fill-mode: backwards;). |
| backwards | В течение периода, определенного с помощью animation-delay , анимация будет применять значения свойств, определенные в ключевом кадре, которые начнут первую итерацию анимации. Это либо значения ключевого кадра from (когда animation-direction: normal или animation-direction: alternate), либо значения ключевого кадра to (когда animation-direction: reverse или animation-direction: alternate). |