Курс CSS. Пример 01 урока 52.

Очень полезное свойство transitions (преобразования) позволяет получать интересные визуальные анимационные эффекты самым естественным путем, чисто через CSS, без таких технологий как JavaScript, Java, Flash. Это свойство похоже на свойство transitions (преобразования), рассмотренное нами на предыдущем уроке, см урок 51, с методической точки зрения, лучше сначало изучить свойство transitions (преобразования), а затем уже переходить к изучению свойства animation (анимация).

Изучение свойства animation (анимация) начнем с небольшого практического примера под названием "Вечный двигатель".

Для создания анимации в CSS3 необходимо использовать правило @keyframes.

Правило @keyframes определяет где и как создается анимация. Необходимо определить стили CSS внутри правила @keyframes, и анимация будет постепенно изменять свойства объекта от текущего стиля к новому.

В примере выше меняется цвет фона и положение объекта.

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

• Определить имя анимации.
• Определить продолжительность анимации.

Анимация - это эффект, который позволяет объекту постепенно менять стиль с одного на другой.

Можно менять сколько угодно стилей, сколько угодно раз.

Определить, когда изменения должны произойти можно с помощью значений в процентах или используя ключевые слова "from" и "to", что является синонимами для 0% и 100% соответственно.

0% - это начало анимации, 100% - когда анимация заканчивается.

Гораздо лучше использовать селекторы 0% и 100% (а не "from" и "to"), т.к. браузеры лучше понимают именно формат 0% и 100%.

Практическое приминение возможности анимации без программирования на JavaScript и др. технологиях разумно при публикации рекламных объявлений.

См ниже пример и обратите внимание, что даже если браузер не поддерживает свойство animation (анимация), ничего страшного не случится. Просто мяч будет без движения, но смысл объявления все равно будет понятен посетителю странички.