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.

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript. Анимация применяется к любым html-элементам, а также к псевдоэлементам :before и :after

Поддержка браузерами

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. Создать саму анимацию c помощью ключевого слова @keyframes
2. Подключить её к элементу, который надо анимировать, и указать нужные свойства.

Правило @keyframes

Правило @keyframes позволяет создавать анимацию с помощью ключевых кадров - состояний объекта в определенный момент времени.

Ключевые кадры анимации создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты.

Если не задан начальный (from , 0%) или конечный (to , 100%) кадр, браузер установит для них расчётные значения анимируемых свойств такими, какими они были бы если бы не была применена анимация.

Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего.

При определении анимации сразу после свойства @keyframes должно следовать имя данной анимации (данное имя затем должно быть указано в свойстве animation элемента, который будет анимирован).

@keyframes move { from { transform: translateX(0px); } 50% { transform: translateX(130px); } 100% { transform: translateX(0px); } }

@keyframes move { from { 50% { 100% { transform : translateX (0px ) ;

Мы создали анимацию, которая работает следующим образом:

1. Начало анимации (from можно было написать 0%) — положение элемента по оси Х равно 0px;
2. Середина анимации (50%) — положение элемента по оси Х равно 130px;
3. Конец анимации (to мы использовали 100%) — возвращаем элемент на начало анимации, т.е. положение элемента по оси Х равно 0px;

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

Ключевые кадры можно группировать:

@keyframes move { from { transform: translateX(0px); } 25%, 50% { transform: translateX(130px); } 100% { transform: translateX(0px); } }

@keyframes move { from { transform : translateX (0px ) ; 25%, 50% { transform : translateX (130px ) ; 100% { transform : translateX (0px ) ;

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

element { animation-name: animation-1, animation-2; animation-duration: 2s, 4s; }

element { animation-name : animation-1, animation-2 ; animation-duration : 2s, 4s ;

Подключение анимации к элементу происходит двумя командами — animation-name и animation-duration .

Название анимации

Свойство animation-name задает имя анимации. Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно слово или несколько, связанных между собой при помощи пробела — или нижнего подчеркивания _.

animation-name: move;

Временная функция

Свойство animation-timing-function позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. Обратим внимание, что скорость воспроизведения анимации чаще всего нелинейная, т.е. ее мгновенная скорость в разных участках будет отличаться. На данный момент существует несколько уже встроенных аргументов для этого правила: ease , ease-in , ease-out , ease-in-out , linear , step-start , step-end .

Однако такие функции можно создавать самому. Специальная функция cubic-bezier (P1x, P1y, P2x, P2y); принимает четыре аргумента и строит на их основе кривую распределения значений в процессе анимации. Потренироваться в создании своих функций и посмотреть как они работают можно на этом сайте .

И, наконец, анимацию можно превратить в набор дискретных значений с помощью функции steps (количество шагов, направление), в качестве аргументов которой задаётся количество её шагов и направление, которое может принимать значения start или end .

• 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) — см.выше.
• inherit — наследует это свойство от родительского элемента.

Визуальное сравнение

Анимация с задержкой

Свойство animation-delay определяет задержку до начала воспроизведения анимации, задаётся в секундах или миллисекундах. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Если вы хотите, чтобы анимация началась с середины, задайте отрицательную задержку, равную половине времени, установленном в animation-duration . Не наследуется.

element { animation-name: animation-1; animation-duration: 2s; animation-delay: 10s; // Перед стартом этой анимации пройдет 10 сек. }

Повтор анимации

Свойство animation-iteration-count позволяет запустить анимацию несколько раз. Не наследуется. В качестве значения выставляем любое положительное значение 1, 2, 3 … и т.д. либо infinite для бесконечного повторения. Значение 0 или любое отрицательное число удаляют анимацию из проигрывания.

До появления CSS3 при слове «анимация» верстальщиков бросало в холодный пот. А всё потому, что в те времена сделать качественную и красивую анимацию было не тривиальной задачей. CSS этого делать не умел, поэтому все анимации делались на JavaScript. Нужно было перелопатить кучу форумов, найти таких же товарищей по несчастью, потратить уйму времени на разработку, а в итоге услышать от дизайнера: «Ладно, сойдет и так». И когда наконец вышел CSS3, фейерверки не прекращались до утра, а шампанское лилось рекой. Это был знаменательный день для всех web-разработчиков (следующий такой день был, когда Microsoft объявила о прекращении поддержки Internet Explorer). С приходом CSS3 многие ранее сложные задачи превратились в простые и приятные для работы. Это же касается анимаций в CSS, о которых я расскажу в данной статье.

CSS transitions

CSS transitions позволяют сделать изменения CSS-свойств плавно и в течение некоторого времени. Таким образом, вы получаете возможность контролировать процесс перехода элемента от одного состояния к другому. Начнем с простейшего примера и продолжим дальше.

При наведении курсора на квадрат плавно изменяется цвет фона.

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

• transition-property;
• transition-duration;
• transition-timing-function;
• transition-delay;
• transition;

transition-property - указывает список свойств, которые будут анимироваться; свойства, которые здесь не указаны, будут изменяться обычным образом. Можно анимировать все свойства для конкретного элемента, указав значение all. Если вы не указали ни одного свойства, то по умолчанию используется значение all.

Transition-property: width;

transition-duration - задаёт значение продолжительности анимации, время можно указывать в секундах или миллисекундах.

Transition-duration: 1s;

transition-timing-function - временная функция, указывает точки ускорения и замедления за определенный период времени для контроля изменения скорости анимации. Проще говоря, с помощью этого свойства можно указать поведение для анимации. Например, мы можем ускорить анимацию в начале и замедлить в конце, либо наоборот. Для того, чтобы задать процесс анимации используются кривые Безье. Вообще, transition-timing-function позволяет сделать очень много разных поведений для анимаций, это целая тема для статьи, поэтому здесь мы не будем углубляться.

Transition-timing-function: cubic-bezier(0, 0, 1, 1);

transition-delay - задаёт задержку времени до начала анимации, можно указывать в секундах или миллисекундах.

Transition-delay: 500ms;

transition - это общее свойство, которое позволяет перечислить первые четыре свойства в порядке: property, duration, timing-function, delay.

Transition: background-color 1s cubic-bezier(0, 0, 1, 1) 500ms;

У нас получилась вот такая простая анимация: при наведении мышкой на квадрат изменяется ширина; продолжительность анимации одна секунда; анимация воспроизводится по линейной функции; задержка перед началом анимации 500 миллисекунд.

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

CSS animations

CSS animations позволяют делать более сложные анимации, нежели CSS transitions. Весь секрет в @keyframes. Правило @keyframes позволяет создавать анимацию с помощью набора ключевых кадров, то есть описывает состояние объекта в определенный момент времени. Давайте рассмотрим простой пример.

Наш круг ожил и он как будто пульсирует.

Есть 9 свойств, которые позволяют контролировать CSS animations:

• animation-name;
• animation-duration;
• animation-timing-function;
• animation-delay;
• animation-iteration-count;
• animation-direction;
• animation-play-state;
• animation-fill-mode;
• animation;

animation-name - здесь указвается имя анимации, которое связывает правило @keyframes с селектором.

Animation-name: my-animation; @keyframes my-animation { 0% { opacity: 0; } 100% { opacity: 1; } }

animation-iteration-count - задаёт количество повторов анимации, значение по умолчанию 1. Значение infinite означает, что анимация будет проигрываться бесконечно.

Animation-iteration-count: 2;

animation-direction - задаёт направление анимации.

Animation-direction: reverse;

animation-play-state - данное свойство управляет остановкой и прогрыванием анимации. Есть два значения, running (анимация проигрывается, по умолчанию) и paused (останавливает анимацию).

Animation-play-state: paused;

animation-fill-mode - устанавливает, какие CSS-свойства будут приминены к объекту до или после анимации. Может принимать такие значения:

• none - анимируемые CSS-свойства применятся к объекту только во время воспроизведения анимации, по окончании объект возвращается в исходное состояние;
• forwards - анимируемые CSS-свойства применятся к объекту по окончании воспроизведения анимации;
• backwards - анимируемые CSS-свойства применятся к объекту до начала воспроизведения анимации;
• both - анимируемые CSS-свойства применятся к объекту и до начала, и после окончания воспроизведения анимации;

Animation-fill-mode: backwards;

Свойства animation-duration , animation-timing-function , animation-delay работают так же, как аналогичные свойства в CSS transitions, о которых я писал раньше, поэтому не буду повторяться.

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

Motion Path Module

Motion Path Module CSS позволяет создавать движение объектов по контуру через специальное свойство motion-path. Раньше такую анимацию можно было сделать только с помощью SVG или сложных скриптов.

В этой спецификаии есть 3 свойства:

• motion-path;
• motion-offset;
• motion-rotation;

motion-path - это свойство позволяет указать точки(координаты) по которым будет двигаться объект. Синтаксис такой же как у SVG-атрибута path.

Motion-path: path("M 235,323 Q 412,440 365,615 Q 400,300 670,240 L 870,340 L 975,535 Q 730,600 630,535 z");

motion-offset - это свойство приводит объект в движение от начальной точки до конечной. Оно принимает либо двойное значение длины, либо проценты. Чтобы объект начал двигаться, нужно определить анимацию, которая будет идти от 0 до 100%.

@keyframes airplane-fly { 0% { motion-offset: 0; } 100% { motion-offset: 100%; } }

motion-rotation - это свойство позволяет указать, какой стороной вперед будет двигаться объект. Можно указать auto, reverse или свое значение в градусах ("-45deg", "30deg" и т.д).

Motion-rotation: auto;

К сожалению, motion-path пока что поддержывается только в Chrome и Opera, но будем надеяться, что остальные браузеры в скором времени возьмут с них пример, ведь штука действительно полезная.

Для тех, кто ещё не понял, как это работает, или хочет лучше с этим разобраться, я сделал пример (ссылка на codeopen).

В данной подборке собраны самые лучшие и качественные CSS фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.

CSS 3D облака

В этом демо Вы сможете создавать и редактировать причудливые облака в 3D. Данные облака на CSS дают понять нам, что возможности веб технологий практически безграничны.

Логотипы на чистом CSS

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

Алфавит с CSS анимацией

Отличный и художественный пример использования CSS в алфавите

3D навигация для сайта

Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.

Дудл от Google на CSS

Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации

Слайдер

Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.

Двойное анимированное кольцо

Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS

Размытие на CSS

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

Полное руководство по Flexbox

Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.

Красочное и анимированное меню на CSS3

Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.

CSS фильтры

Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.

CSS формы

Пост о CSS формах с многочисленными примерами

Прогресс бары на CSS

Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.

Анимация — Animate.css

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

Индикаторы загрузки — Spinkit

Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS.

Кнопки

Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант

Генератор для создания переключателей

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

Всплывающие подсказки

CSS библиотека бесплатных всплывающих подсказок — Hint.css

Цветовые схемы

Схемы цветов для людей, которые не любят копаться в коде

ВНИМАНИЕ! Поскольку в этом уроке мы с вами разберем анимацию, на картинках я вам пример ее работы продемонстрировать не смогу, поэтому смело открывайте редактор для кода и записывайте туда код, приведенный в этот статье.

Основы создания

Итак, прежде всего нужно начать с того, как ее создавать. Вы наверняка привыкли к тому, что любая вещь в 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-ти, оставшуюся часть анимации он будет плавно уменьшаться, в конце концов вернув себе прежние размеры. Все просто.

Форма анимации

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