Телевизор 

Пример анимации на странице html5 css3. Ключевые кадры, анимирующие солнце. Back: стреляем из лука

Данная статья являетсвя продолжением статьи "Рисование встроеннымисредствами HTML5", в которой шла речь о новом элементе ‹canvas› , а также способах работы с ним. Мы уже познакомились с тем, как с помощью javascript можно описать контекст и изобразить на холсте графические примитивы (линия, прямоугольник, дуга, кривые), с помощью которых можно построить сложные изображения. В данной статье мы рассмотрим методы и способы создания простейших анимационных эффектов для создаваемых изображений на холсте.

Каждая анимация ‹canvas› состоит из набора простейших кадров. Для того, чтобы отобразить на холсте один кадр необходимо:

  1. Очистить холст. Это можно сделать, например, с помощью метода clearRect() .
  2. Если вы хотите, чтобы исходное состояние холста всегда сохранялось, даже если вы изменяете параметры цвета и т.д., то необходимо сохранить состояние холста.
  3. Нарисовать объекты анимации, фактически этот этап и есть создание кадра.
  4. Если вы сохраняли сотсояние холста, то необходимо его загрузить, прежде чем начинать создание нового кадра.

Анимация движения

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

В рамках функции animation() осуществляется следующая последовательность действий:

  1. Очистка холста.
  2. Отрисовка закрашенного квадрата.
  3. Изменение координаты левого верхнего угла квадрата по - горизонтали, для "смещения" квадрата на следующем шаге.
  4. В случае, если наш квадрат дойдет до края холста, то начальное значение координаты x вернется к нулю.
  5. Рекурсивный вызов animation() , посредством метода setTimeout .

Создадим функцию CreateImage() для демонстрации этой анимации:

Function CreateImage() { var cnvs = document.getElementById("canvas1"); var ctxt = cnvs.getContext("2d"); var x = 0; function animation() { ctxt.clearRect(0,0,150,150); ctxt.fillRect(x,50,50,50); x = x + 0.2; if (x › 100) { x = 0; } setTimeout(animation, 10) } animation(); }

Результат:

Анимация без очистки экрана

Рассмотрим еще один пример. В данном случае мы не будем очищать экран каждый раз при прорисовке нового кадра, таким образом получится, что изображение будет плавно "прорисовываться". Особенно удачно это можно использовать при создании деловой или статистической графики, например, построим две функции.

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

Function CreateImage() { var cnvs = document.getElementById("canvas"); var ctxt = cnvs.getContext("2d"); var x = 1; function animation2() { ctxt.fillStyle="blue"; ctxt.fillRect(x*10, (Math.sin(x))*50+75, 2.5, 2.5); ctxt.fillStyle="red"; ctxt.fillRect(x*10, (Math.cos(x))*50+75, 2.5, 2.5); x = x + 0.01; if (x › 60) { x = 1; ctxt2.clearRect(0,0,640,150); } setTimeout(animation, 10); } animation(); }

Результат представлен ниже:

Анимация спрайтов

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

Элемент ‹canvas› , как уже было рассказано в предыдущей статье поддерживает работу с внешними изображениями, которые можно вставлять на холст. Таким образом, можно вставить спрайт-изображение и закрывая ненужную часть создать иллюзию непрерывной анимации.

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

Для вывода кадров спрайта будем использовать метод контекста

DrawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Его параметры:

  • img - определяет используемое изображение или видео
  • sx - начальная координата х вырезания (необязательный параметр)
  • sy - начальная координата y вырезания (необязательный параметр)
  • swidth - ширина вырезаемого изображения (необязательный параметр)
  • sheight - высота вырезаемого изображения (необязательный параметр)
  • x - координата размещаемого изображения на canvas
  • y - координата размещаемого изображения на canvas
  • width - ширина используемого изображения (растянуть или уменьшить изображение, необязательный параметр)
  • height - высота используемого изображения (растянуть или уменьшить изображение, необязательный параметр)

Создадим функцию для "оживления" этого спрайта:

Это только небольшая демонстрация возможностей HTML5 Canvas. Эта технология имеет широкий спектр применения: от создания деловой графики до полноразмерных и масштабных браузерных игр.

Прежде чем начать пост, давайте сформулируем те вопросы, на которые пользователи чаще всего стараются найти ответы в сети. Как сделать сайты еще более динамичными и интересными для посетителей? Как научиться привлекать внимание? Какие инструменты стоит использовать, чтобы анимировать объекты?

Если вы хотите узнать больше об инструментах HTML5 анимации , в данной статье мы постараемся изложить максимум полезной информации о них.

Если вы готовы, мы начинаем.

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

HTML5 является последней измененной спецификацией HTML, которая предоставляет некоторые дополнительные метки и функции (кроссбраузерность, видео, аудио, анимация и многое другое), которые способны дать пользователю больше возможностей для использования различных передовых технологий. Например, одна из таких передовых особенностей - Canvas . Когда люди говорят о HTML5, они говорят в первую очередь об элементе Canvas. Что интересно, многие из них даже не знают, что это такое и что данная технология позволяет сделать.

Canvas с англ. означает холст, потому вы можете думать об этом элементе, как о самом настоящем холсте для живописи. Также как профессиональные художники пишут сложные картины, Canvas позволяет создавать вещи, которые ранее было невозможно сделать. Использование 2 D форм и образов стало гораздо более простым и это все благодаря Canvas.

Чтобы вы понимали, о чем идет речь, просто взгляните на одну из компьютерных игр. Однако справедливости ради хотим сказать, что технология HTML5 была популярна еще до того, как Стив Джобс обнародовал свои мысли по этому поводу.

Показ любой анимации или интерактивности в пределах элемента Canvas почти всегда затрагивает JavaScript. Однако JavaScript, как правило, требует значительной загруженности процессора при воспроизведении элементов анимации.

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

Из-за постоянно развивающихся технологий современные браузеры поддерживают анимацию и интерактивный контент без необходимости установки дополнительных плагинов, например, таких, как Flash. Вместо этого они используют комбинацию JavaScript, CSS3, HTML5.

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

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

А теперь давайте рассмотрим более детально каждый из инструментов для анимации HTML5.

Бесплатный HTML5 редактор для новичков и профессионалов. Он поддерживает все популярные текстовые фильтры, поэтому вам не нужно использовать Photoshop, чтобы создать невероятно крутой текст. Кроме того, инструмент предоставляет большую коллекцию изображений, которые можно использовать в своем проекте, а также управлять их свойствами и создавать удивительные эффекты, подобные эффектам в Instagram. Вы также сможете создавать удивительную анимацию с впечатляющими переходами и контролировать ее.

Инструмент, с помощью которого вы сможете преобразовать изображения и увеличить скорость его загрузки на сайте. Обрабатывает картинки, используя при этом инструменты jQuery, CSS3 и HTML5.

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

Инструмент который поможет протестировать шрифт и остановиться на выборе правильного решения. Здесь его можно сразу просмотреть без изменений в CSS и HTML сайта.

Инструмент имеет специальную систему анимации по ключевым кадрам, которая любой неподвижный элемент может превратить в живой. После нажатия кнопки «Запись» Tumult Hype записывает каждый шаг, создавая в автоматическом режиме ключевые кадры по мере необходимости. Вы также можете самостоятельно добавлять, удалять, перестраивать ключевые кадры для тонкой настройки содержимого.

HTML 5 инструмент для создания эскизов и набросков. Полезная штука для веб-дизайнеров.

Google Web Designer позволяет создавать привлекательные интерактивные проекты, основанные на HTML5, которые прекрасно работают на любом устройстве. Редактор имеет два режима создания анимации (быстрая и расширенная). В режиме быстрой анимации вы сможете создавать последовательную анимацию, а редактор самостоятельно будет заботиться о кадрах. В расширенном режиме у вас есть возможность анимировать отдельные элементы, используя слои.


Что же такое GSAP? Это набор инструментов для скриптовой и высокопроизводительной HTML5 анимации, который работает во всех основных браузерах. Эта мощнейшая библиотека обеспечивает эффективность API, контроль и последовательность выполнения действий. С GSAP вы сможете использовать полноценную анимацию, а не довольствоваться лишь переходами между картинками.

Мощный, но простой в освоении редактор. Теперь вы сможете легко и просто создать хорошую анимацию. Рекомендуется для новичков и экспертов. Инструмент прекрасно работать на телефонах и планшетах. Анимация автоматически масштабируется под любой размер веб-браузера. Hippo Animator при необходимости может использовать векторную графику. Существует возможность добавить MP4, YouTube или Vimeo видео. Инструмент имеет встроенный JavaScript. Чтобы добавить анимацию на страницу своего сайта, вам достаточно будет одной строки кода.

Hippo Animator имеет встроенный редактор изображений, при помощи которого можно создавать слайд-шоу и многое другое.

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

Это библиотека для использования в JavaScript. Поддерживает анимацию и стили CSS. Очень мощный инструмент для создания сложной анимации.

Еще один инструмент для создания видео, анимации и графики в реальном времени. Позволяет отрисовывать фигуры в векторе и анимировать их.


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

Надеемся, вы подобрали для себя один из инструментов для создания анимации, которые мы представили вашему вниманию выше. Очень ждем ваших отзывов, какой же инструмент вам показался наиболее эффективным? А может вы уже давно пользуетесь инструментами HTML5 и знаете все секреты эффективной работы с ними. Обязательно поделитесь этой информацией с нашими читателями в комментариях.

На днях я попробовал перерисовать баннер, который я раньше делал в Animate CC с экспортом в CreateJS на платформе GSAP, используя простой HTML и пару JS библиотек.

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

Не так давно один автозавод прислал мне баннер, в который нужно было вставить контактные данные дилера для рекламы на местных ресурсах. Распаковав архив я не увидел ничего, кроме готового html и папок с изображениями и скриптами. Я подумал, что это баннер без исходника (постояно работаю на Animate CC) и полез посмотреть, что у него внутри. Внутри оказалась обычная верстка, а скрипт из 20 строк анимировал все нехитрые внутренности. Баннер я изменил и полез смотреть, что же это такое, GSAP и TimelineLite.

Простое и понятное видео с примером



Не так давно выдалась свободная минутка и я переверстал один из моих готовых баннеров на GSAP
CreateJS GSAP

Я специально не включал с документ GSAP шрифты, но как вставляются свои шрифты в HTML документ и так знает каждый, а вот в Animate CC этот процесс немного нетривиален, достаточно часто я просто перевожу в кривые тексты в выходном файле, чтобы документ был меньше по размеру

Плюсы GSAP

  1. Анимация любого CSS свойства. Боль, скорбь и позор Animate CC/CreateJS с дефолтовыми фильтами Animate CC - размытием, тенями и прочими вещами, которые давно есть в CSS, но не поддерживаются (или поддерживаются плохо) внутри canvas CreateJS
  2. Нативные шрифты и сглаживание. Любой шрифт, какой угодно, можно вставить в HTML-документ и не заморачиваться, результирующий файл не будет расти в зависимости от набора букв, используемых в документе. Изменение шрифта во всем баннере парой слов в CSS
  3. Easing «из коробки». В Aniimate CC надо постоянно таскать кривую easing-функции, здесь я не сделал ничего, чтобы получить красивое замедление элементов
  4. FPS. В документе Animate может наблюдаться сильная зависимость производительности от FPS, постоянно приходится подбирать оптимальные значения для каждого конкретного случая, чтобы не расходовать много ресурсов CPU. В моем примере на компьютере разница была незначительной, но на телефонах - достаточно сильной. А после того, как почитаешь рекомендации, вообще остается только думать, что же там не тормозит
  5. Адаптивность. Медиа-запросы - это всегда гораздо проще, чем считать ширину/высоту внутри ролика скриптами. Резиновый DIV, в отличие от резинового элемента canvas не ест ресурсов вообще
  6. Анимация любого элемента на странице. Можно легко «раскрасить» существующую верстку буквально за несколько минут
  7. Отсутствие(или изменение) понятия ключевых кадров. Элемент верстается, например, в том месте и с теми свойствами, с которыми он должен быть в конце анимации и с помощью директивы from ему задаются свойства, из которых он анимируется в текущее состояние. Либо с помощью директивы to ему указывается конечное состояние
  8. Относительная простота. Не нужно дополнительное ПО, код очень простой и компактный

Плюсы Animate CC

Применимо к баннерам, для анимации элементов на странице эти проблемы малозначительные.
  1. Таймлайн и слои. В многослойном баннере в голом HTML приходится постоянно сделить за z-index, когда в Animate можно просто поменять порядок слоев как заблагорассудится. Одновременная анимация нескольких слоев также визуально не представлена. Изменение порядка кадров в Animate CC также наглядно проще
  2. Вложенные мувиклипы со своей анимацией. Пока не разбирался, как это делается в GSAP, но, понимаю, что придется писать другую отдельную функцию для другого таймлайна

Что в итоге

Имеем классическую палку о двух концах: можно использовать любой редактор, но нужно следить за расположением слоев и пересчитывать z-index в голове. Выигрыш в производительности и простоте реализации может пересилить отсутствие визуальных инструментов редактирования таймлайна. Кому-то может наоборот больше понравиться исключительно скриптовая анимация. Время разработки баннера на GSAP прямо пропорционально количеству элементов внутри контейнера. Легкость анимации элементов на уже готовой странице - однозначно плюс данной библиотеки, и для сайтов я ее обязательно буду применять в будущем, но для баннеров пока что время разработки критично, тут надо смотреть в каждом конкретном случае, что будет удобнее.

(Перевод Виктории Шидловской статьи Louis Lazaris в Smashing Magazine — An Introduction To CSS3 Keyframe Animations)

Наверное, вы уже слышали о CSS3-анимации. Спецификация была разработана пару лет назад и, как показывает время, становится технологией будущего. Это элегантный способ решить проблему анимации в вебе.

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

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

(Внимание: работает во всех новых браузерах, кроме Opera и IE).

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

Keyframe @ Rule

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

После @ rule и идентификатора следует набор установок (как стили внутри блоков в обычном CSS. Этот набор заключается в фигурные скобки. Другие, уже знакомые вам @ rules, можно посмотреть .

А у нас @ rule, которое мы будем использовать:

@-webkit-keyframes sunrise { /* установки идут здесь … */ }

Слово sunrise (восход) - это идентификатор, который мы выбираем сами, чтобы обращаться к анимации.

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

Keyframe Selectors

Давайте добавим некоторые установки в @ rule:

@-webkit-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; } }

Кроме установок обратите внимание на keyframe selector (определитель, или селектор кадра). На примере выше keyframe selectors - это проценты 0%, 33%, 66%, и 100%. При этом 0% и 100% могут быть заменены ключевыми словами “from” и “to” соответственно, и вы получите тот же результат.

(Примечание переводчика: То есть, если анимация имеет длительность во времени, например, 10 секунд, то проценты указывают на ключевые кадры в 3,3 секунды, 6,6 и 10 секунд соответственно).

Хотя спецификация все еще находится в разработке, некоторые правила уже установлены. Например, порядок указания кадров не имеет значения. Анимация будет проигрываться согласно процентным указателям, а не в том порядке, как они указаны. Так что если вы поставите ключевой кадр “to” перед “from”, анимация все равно будет прокручиваться в нужном порядке. Также, если селекторы “to” и “from” не объявлены, браузер автоматически их создаст. Так что набор установок внутри @ rule, указанный в спецификации CSS3, не является догмой.

Ключевые кадры, анимирующие солнце

Для анимирования солнца я установил 4 ключевых кадра. Комментарии в коде объясняют происходящее.

В первом кадре солнце красного цвета (как обычно при восходе или закате), и находится ниже уровня земли (т. е. невидимо). Положение элемента должно быть relative или absolute, чтобы получился нужный эффект. Это достигается с помощью значений left и bottom. Я также использовал z-index, чтобы быть уверенным, что солнце будет находиться «под» землей. Обратите внимание, что стили, указанные в кадре, это стили, которые участвуют в анимации, то есть, изменяются. Другие стили, такие как z-index и position, объявлены в другом месте кода, так что здесь не указаны.

0% { bottom: 0; /* солнце внизу*/ left: 340px; /* солнце справа*/ background: #f00; /* солнце красное */ }

Где-то на трети нашей анимации (33%) солнце находится на одном и том же уровне по оси x, но меняет цвет с красного на желто-оранжевый и поднимается вверх.

33% { bottom: 340px; /* солнце встает */ left: 340px; background: #ffd630; /* меняет цвет */ }

Затем, примерно через две трети анимации (66%) солнце перемещается влево на 300px. Заметьте, что я опять указал его цвет как в кадре 33%, чтобы солнце не начало краснеть слишком рано

66% { bottom: 340px; left: 40px; /* солнце пересекает небо */ background: #ffd630; /* цвет все тот же */ }

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

100% { bottom: 0; /* солнце садится */ left: 40px; background: #f00; /* становится красным */ }

Ассоциирование анимации с элементом

Следующий кусок кода привязывает название анимации (в нашем случае слово sunrise) с определенным элементом в HTML:

#sun.animate{ -webkit-animation-name: sunrise; }

Представляю вашему вниманию свойство animation-name. Значение этого свойства должно соответствовать идентификатору существующего @keyframes rule, иначе анимация не заработает.

Объект, к которому я обращаюсь, это элемент с id sun и классом animate. Зачем нужно дублировать код таким образом? Затем, чтобы можно было применить ява-скрипт и присвоить класс динамически. Например, в демо открываемая страница статична, анимация запускается после нажатия кнопки. Это значит, что изначально классы имеют другие стили, но после нажатия кнопки новые стили присваиваются всем элементам, и анимация запускается. Мы добиваемся того, что анимацию может контролировать пользователь.

Естественно, это всего лишь один способ добиться контроля. Как всегда в случае с CSS и JavaScript, существует множество способов достигнуть одного и того же.

Функции Duration и Timing (Длительность и Развитие)

Давайте добавим еще две строки к нашему CSS:

#sun.animate { -webkit-animation-name: sunrise; -webkit-animation-duration: 10s; -webkit-animation-timing-function: ease; }

Вы можете указать длительность анимации с помощью свойства animation-duration. Duration указывает сколько времени должно быть отпущено на один полный анимационный цикл. Вы можете указать значение в секундах (например, 4s), миллисекундах (2000ms), и в секундах в десятичных дробях (3.3s).

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

Свойство animation-timing-function, указанное для анимации целиком, позволяет определить развитие анимации в пределах одного цикла. Доступные значения для animation-timing-function - это ease, linear, ease-out, step-start и многие другие, как указано в спецификации .

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

Кроме того, вы можете применять timing к каждому кадру, как здесь:

@-webkit-keyframes sunrise { 0% { background: #f00; left: 340px; bottom: 0; -webkit-animation-timing-function: ease; } 33% { bottom: 340px; left: 340px; background: #ffd630; -webkit-animation-timing-function: linear; } 66% { left: 40px; bottom: 340px; background: #ffd630; -webkit-animation-timing-function: steps(4); } 100% { bottom: 0; left: 40px; background: #f00; -webkit-animation-timing-function: linear; } }

В каждом ключевом кадре наверху стоит отдельная функция timing. Одна из них имеет значение steps (шаги), это значение перебрасывает анимацию вперед на указанное количество предполагаемых шагов. Конечный кадр тоже имеет свою функцию timing, но она сработает только если анимация будет проиграна задом наперед.

В нашем примере мы не используем покадровые функции timing, в данном уроке я просто показал, что это возможно.

Iteration Count и Direction (Количество раз и Направление)

Добавим еще две строчки в наш код:

#sun.animate { -webkit-animation-name: sunrise; -webkit-animation-duration: 10s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; }

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

Свойство animation-iteration-count поставлено на 1, что означает, что анимация будет продемонстрирована только раз. Свойство может иметь значение infinite (бесконечность).

Свойство animation-direction установлено на normal (нормальный, значение по умолчанию), это значит, что анимация будет проигрываться в том же направлении (от начала до конца) при каждом просмотре. В нашем случае анимация будет проиграна только один раз, так что это свойство указывать необязательно. Другое свойство, которое мы могли бы здесь указать, это alternate (альтернативно), что заставит анимацию играть в обратном направлении при каждой следующей прокрутке. Чтобы это свойство было применено, iteration count должно быть установлено на 2 или большее количество раз.

Delay And Play State (Отсрочить и Состояние проигрывателя)

Еще две строки в наш CSS:

#sun.animate { -webkit-animation-name: sunrise; -webkit-animation-duration: 10s; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 5s; -webkit-animation-play-state: running; }

Первое представленное вам свойство animation-delay делает именно то, что вы думаете - отсрачивает анимацию на указанное вами количество времени. Интересно, что свойство может принимать отрицательное значение, которое передвигает стартовую точку отсчета внутри анимации на указанное количество секунд.

Свойство animation-play-state, которое возможно удалят из спецификации, принимает два возможных значения running и paused. У этого свойства ограниченная практическая польза. По умочанию значение running, а paused просто ставит анимацию на паузу, пока пользователь вречную не нажмет play. Вы не можете указать свойство paused внутри кадра, но польза свойства возникает, когда в применяете JavaScript, чтобы анимация реагировала на действия пользователя, какие-то введенные значения и т. п.

Fill Mode

UPDATE: свойство удалено из спецификации.

Остальное в спецификации

Более подробно все возможные свойства для CSS-анимации вы можете посмотреть в спецификации .

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

Как уже было сказано, разобранный здесь код относится только к одному элементу анимации - солнцу. Чтобы посмотреть код для всех элементов, посетите демонстрационную страницу . Вы можете либо открыть исходный код страницы, либо полистать вкладки справа.

В демо не использованы никакие картинки, и анимация не использует ява-скрипты. Солнце, луна и облако нарисованы средствами CSS3 с помощью свойства border-radius, и ява-кодирование применено только к вкладкам справа и к кнопке, запускающей и прерывающей анимацию.

При просмотре анимации в любом НЕ WebKit-браузере, она не сработает.

Список поддерживающих CSS-анимацию браузеров:

  • Chrome 2+,
  • Safari 4+,
  • Firefox 5+,
  • iOS Safari 3.2+,
  • Android 2.1+.

Также получено официальное заявление о том, что анимация будет поддерживаться в Opera.

Ну и ни одного слова об ожидаемой поддержке в IE.

HTML5 сегодня можно представить как новую платформу для реализации не просто страниц, а web-приложений состоящих из анимации , графики, видео и аудио. Все это делает HTML одним из самых популярных языков программирования, который продолжает динамически развиваться и совершенствоваться. Бесспорно, одной из самых потрясающих особенностей HTML5 , на сегодняшний день, есть возможность создания анимации . Сайты с качественной анимацией выглядят великолепно и привлекают больше внимания посетителей, что способствует усилению бренда компании. HTML довольно простой язык, но несмотря на это, процесс создания анимации требует не мало усилий, навыков, а иногда и углубленного изучения javascript и . Но не расстраивайтесь раньше времени, у нас для вас есть замечательная новость, чтобы облегчить этот процесс можно воспользоваться специальными инструментами. В данной статье мы познакомим вас с лучшими онлайн инструментами создания HTML5 анимации . Каждый из них имеет свои уникальные преимущества, так что вы можете выбрать именно тот, который наиболее будет удовлетворять вашим требования.

Mixeek

Бесплатный сервис для проектирования и реализации веб-анимации и интерактивных анимированных приложений. Основан исключительно на html5, javascript и css3. Был разработан чтобы предоставить легкую и простую альтернативу платным продуктам.

Animatron

Интуитивно понятный редактор для разработки и публикации анимированного и интерактивного содержания, таких как банеры , инфографика и многое другое. Работает на всех устройствах, от мобильных до настольных ПК. Позволяет перетаскивать объекты из библиотеки, создавать рисунки с помощью инструментов рисования, импортировать звук, регулировать анимацию на timeline. Есть возможность экспортировать результат в HTML5, GIF или видео .

HTML5 Maker

Один из самых популярных бесплатных онлайн инструментов для создания HTML5 анимации . Поддерживает популярные текстовые фильтры, имеет большую коллекцию изображений. С его помощью можно достигнуть удивительных результатов.