Анимации

Internet Explorer 10 и приложения Магазина Windows на JavaScript поддерживают анимации каскадных таблиц стилей (CSS). Используя анимации CSS, вы можете визуально оживить свои приложения с помощью плавных динамических эффектов.

Анимации CSS определены консорциумом W3C в спецификации Анимации CSS.

Эффекты анимации схожи с переходами тем, что при анимации элементы изменяют положение, размер, цвет и прозрачность; они поворачиваются, масштабируются, переносятся и т. д. Точно так же, как и в случае с переходами, можно управлять скоростью анимации, настраивая функции синхронизации.

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

Как и следовало ожидать, анимации CSS3 дают бесконечные возможности для создания ярких и привлекательных приложений. В этом разделе представлен краткий обзор создания анимации CSS в Internet Explorer 10 и в приложениях Магазина Windows на JavaScript, а также пример использования анимаций CSS3.

Раньше для работы с Internet Explorer 10 и приложениями Магазина Windows на JavaScript свойствам, at-правилу и событиям, описанным в этом разделе, требовался специальный префикс поставщика (Майкрософт) — "-ms-". Этот префикс больше не требуется, но он по-прежнему будет распознаваться. Для обеспечения совместимости в будущем приложения, использующие свойства анимации с префиксом Майкрософт, должны быть соответствующим образом обновлены.

Дополнительные сведения о списке свойств CSS, которые можно анимировать, см. в разделе Свойства анимаций и переходов.

Создание анимации

Анимация создается в три основных этапа:

1. Указание свойств анимации.
2. Создание ключевых кадров.
3. Применение анимации к одному или нескольким элементам.

Указание свойств анимации

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

Свойство animation-name

Свойство animation-name указывает идентификаторы анимации ("имя", которое вы дали определенной анимации). Идентификатор анимации выбирает at-правило  @keyframes CSS. Здесь показан его синтаксис.

СвойствоОписание

animation-name

Определяет один или несколько идентификаторов анимации. Анимации идентифицируются с помощью at-правила  @keyframes CSS.

 

Свойство animation-duration

Свойство animation-duration указывает продолжительность одного цикла анимации. Здесь показан его синтаксис.

СвойствоОписание

animation-duration

Указывает одно или несколько разделенных запятыми значений, каждое из которых определяет продолжительность одного полного цикла анимации. Каждое значение имеет форму числа с плавающей запятой, за которым следует обозначение единицы времени (ms или s). Для этого свойства можно указывать отрицательные значения.

 

Свойство animation-timing-function

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

Можно явным образом определить кривую с помощью функции cubic-bezier, введя четыре значения вручную, или же выбрать одно из ключевых слов функции, которые соответствуют часто применяемым функциям синхронизации. Синтаксис свойства показан здесь:

СвойствоОписание

animation-timing-function

Указывает одну или несколько разделенных запятыми функций синхронизации, определяющих промежуточные значения свойств, которые используются на протяжении одного цикла анимации. Анимация рассчитывается на основании набора соответствующих свойств объекта, указанных в at-правиле  @keyframes CSS, определенном свойством animation-name. Возможные значения перечислены ниже. Описания каждой функции см. на странице справки animation-timing-function.

cubic-bezier(x1,y1,x2,y2)

Четыре параметра данной функции должны быть значениями с плавающей запятой от 0 до 1 включительно. Значения соответствуют координатам x и y точек P1 и P2 кривой Безье третьего порядка. Для свойств, отличающихся от opacity и color, функция кривой cubic-bezier принимает координаты y, находящиеся вне стандартного диапазона между 0 и 1. Это позволяет создавать "эластичные" или "отскакивающие" эффекты перехода.

ease

Это начальное значение. Эта функция синхронизации постепенно увеличивает скорость в начале, анимируется на полной скорости, а затем постепенно уменьшает скорость в конце.

linear

Эта функция синхронизации имеет одинаковую скорость от начала до конца.

ease-in

Эта функция синхронизации постепенно увеличивает скорость в начале.

ease-out

Эта функция синхронизации постепенно уменьшает скорость в конце.

ease-in-out

Эта функция синхронизации постепенно увеличивает скорость в начале, а затем постепенно уменьшает ее в конце.

steps

Эта функция синхронизации определяет пошаговую функцию синхронизации и использует два параметра. Первый параметр указывает число интервалов; необязательный второй параметр указывает точку в интервале, в которой меняется значение свойства. Второй параметр ограничен значениями start или end (это установлено по умолчанию).

 

Свойство animation-iteration-count

Свойство animation-iteration-count определяет число циклов анимации. Синтаксис свойства показан здесь:

СвойствоОписание

animation-iteration-count

Определяет, сколько раз воспроизводится цикл анимации. Несколько значений разделяются запятыми.

<number>

Число воспроизведений цикла анимации. Вы можете указать нецелое число, и анимация прекратится в определенный момент цикла. Начальное значение — "1".

infinite

Анимация повторяется бесконечное число раз.

Если указано отрицательное значение или "0", анимация не применяется.

Вы можете использовать свойство animation-iteration-count вместе со свойством animation-direction, которому задано значение alternate, что приведет к воспроизведению анимации в обратном направлении по альтернативным циклам.

 

Свойство animation-direction

Свойство animation-direction определяет направление воспроизведения цикла анимации. Синтаксис свойства показан здесь:

СвойствоОписание

animation-direction

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

normal

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

reverse

Это значение указывает на то, что циклы анимации воспроизводятся в порядке, обратном указанному.

alternate

Это значение указывает, что циклы анимации чередуются между воспроизведением в прямом (нечетные итерации) и обратном (четные итерации) направлениях.

alternate-reverse

Это значение указывает, что циклы анимации чередуются между воспроизведением в обратном (нечетные итерации) и прямом (четные итерации) направлениях.

 

Свойство animation-play-state

Свойство animation-play-state определяет, воспроизводится анимация или приостановлена. Это свойство может быть полезно при создании механизма, позволяющего пользователю приостанавливать анимацию. Синтаксис свойства показан здесь:

СвойствоОписание

animation-play-state

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

paused

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

running

Продолжает воспроизводить приостановленную анимацию. Анимация продолжается с текущего значения.

 

Свойство animation-delay

Свойство animation-delay определяет время начала анимации и позволяет начать воспроизведение анимации через некоторое время после ее применения. Здесь показан его синтаксис.

СвойствоОписание

animation-delay

Указывает одно или несколько разделенных запятыми значений смещения в пределах анимации (временной интервал от начала анимации) до начала отображения анимации для набора соответствующих свойств объекта. Каждое значение имеет форму числа с плавающей запятой, за которым следует обозначение единицы времени (ms или s).

  • Начальное значение — "0"; оно означает, что анимация начнет выполняться сразу после применения.
  • При отрицательном значении анимация начнет выполняться сразу после применения, но будет выглядеть так, будто выполнение началось в указанном смещении или во время цикла воспроизведения анимации.

 

Свойство animation-fill-mode

Свойство animation-fill-mode определяет видимость эффектов анимации до или после ее воспроизведения. По умолчанию анимация не влияет на значения свойств в промежутке времени между ее применением и выполнением (во время задержки, определенной свойством animation-delay). Также по умолчанию анимация не влияет на значения свойств после ее завершения (по истечении времени, определенного свойством animation-duration). Свойство animation-fill-mode используется, чтобы переопределить поведение по умолчанию. Здесь показан его синтаксис.

СвойствоОписание

animation-fill-mode

Указывает одно или несколько разделенных запятой значений, которые определяют поведение анимации вне времени ее воспроизведения. Ему можно назначить любое из следующий значений:

none

Поведение по умолчанию не меняется.

forwards

Окончательное значение свойства (как определено в последнем ключевом кадре) сохраняется после окончания анимации.

backwards

Начальное значение свойства (как определено в первом ключевом кадре) применяется до отображения анимации в течение периода, указанного свойством animation-delay.

both

Применяются прямой и обратный режимы заполнения.

 

Свойство animation

Собирательное свойство animation объединяет шесть свойств анимации в одно. Его синтаксис показан здесь:

СвойствоОписание

animation

Определяет один или несколько наборов разделенных пробелами свойств анимации для набора соответствующих свойств объекта. Значения свойств анимации должны быть установлены в следующем порядке:

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

 

Рассмотрите следующий пример кода, который определяет несколько анимационных свойств элемента div:


div {
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-delay: -1s;
  animation-iteration-count: 2;
  animation-direction: normal;
}


С помощью собирательного свойства animation можно указать все шесть свойств всего лишь в одной строке, как показано здесь:


div {
  animation: myAnimation 3s ease-out -1s 2 normal;
}


Создание ключевых кадров

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

ПравилоОписание

@keyframes

Список ключевых кадров свойства анимации для объекта в HTML-документе. Это правило используется для определения значений свойств в разные моменты во время анимации, а также идентификатора для анимации. Оно определяет значения свойств для одного цикла анимации. (Анимация может повторяться один или несколько раз.)

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

 

Следующий пример демонстрирует три селектора ключевых кадров, каждый с двумя дескрипторами ключевых кадров.


@keyframes myAnimation {
  from {     
    left: 100px;
    right: 50px;  
  } 
  40% {      
    left: 50px;
    right: 10px; 
  }
  to {         
    left: 10px;
    right: 10px;
  }
}

В этом примере ключевые кадры определены для трех точек на протяжении анимации: начала (значение from или 0 %), 40 % и конца (значение to или 100 %).

Также можно определить функцию синхронизации, которая будет использоваться при перемещении анимации к следующему ключевому кадру. Просто используйте свойство animation-timing-function в подходящем селекторе ключевых кадров.

Применение анимации

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

После завершения анимации анимированные свойства возвращаются к своим исходным значениям.

Пример

В следующем примере показана анимация CSS. Она была создана с помощью демонстрационной версии Hands On: Animations на сайте IE Test Drive.

Для начала создадим элемент div с текстом и применим к нему некоторые стили:


<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<style type="text/css">
body {
  padding:10px;
  font:bold 20pt "Segoe UI";
}
div {
  width:250px; 
  background-color:lime;
  padding:10px;
}
</style>
</head>
<body>
<div>
Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim,
vitae euismod odio. Suspendisse eu.
</div>
</body>
</html>


Чтобы увидеть, как выглядит этот код, просмотрите эту страницу.

Теперь определим некоторые параметры для анимации. Добавим селектор к секции style, которая использует псевдокласс :active. Это означает, что анимация запустится, только если пользователь щелкнет и будет удерживать (или прикоснется и будет удерживать) блок текста. Анимация будет продолжаться до ее завершения.

Чтобы анимация началась сразу, продолжалась 5 секунд, повторилась один раз (с общим количеством итераций, равным 2) и ей было присвоено имя demo, добавим следующий селектор:


...
div:active {
  animation-delay: 0s;
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-name: demo;
}
...

Теперь создадим три ключевых кадра —: один для начала анимации, один для середины и один для конца. В пределах каждого кадра определим свойства, которые будут меняться, и функции синхронизации, чтобы определить скорость изменения.


@keyframes demo {
  from {
    animation-timing-function: ease;
  }
  50% {
    background-color: purple;
    animation-timing-function: ease-in;
    transform: translate(20px,30px);
  }
  to {
    background-color: blue;
  }
}

Мы определили два свойства для анимирования: background-color и transform. За один цикл анимации цвет фона элемента div изменяется от травяного (исходный цвет) до сиреневого, а затем до синего. Также элемент div перемещается вправо и вниз на 20 и 30 пикселей соответственно, а потом обратно. Для расчета анимации от начального момента до средней точки (ключевой кадр в точке 50%) используется функция синхронизации ease, а затем для расчета от средней точки до конечного момента — функция синхронизации ease-in. Анимация повторяется один раз.

Просмотр анимации. (Требуется Internet Explorer 10.)

События DOM анимации

Internet Explorer 10 и приложения Магазина Windows на JavaScript определяют три события DOM анимации:

animationstart

Событие animationstart возникает в начале анимации, при необходимости учитывая любую задержку анимации (как определено свойством animation-delay). Отрицательная задержка приводит к запуску события по истечении времени, равного абсолютной величине задержки.

  • Мыльные пузыри: да
  • Возможность отмены
  • Информация о контексте: animationName (AnimationEvent)

animationend

Событие animationend возникает по окончании анимации.

animationiteration

Событие animationiteration возникает в конце каждой итерации анимации. Это событие возникает, только когда значение свойства animation-iteration-count больше единицы.

  • Мыльные пузыри: да
  • Возможность отмены: да

В этом примере анимируется элемент <div> и запускаются события animationend, animationend и animationiteration, чтобы изменить текст в прямоугольнике. Попробуйте пример в Интернете.


<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>CSS Animation Events Example</title>
<style>
  body {
    padding:10px;
    font-family:"Segoe UI";
  }
  div {
    width:250px; 
    background-color:lime;
    padding:10px;
    font-weight:bold;
    font-size:20pt;
  }
  div:active {
    animation-delay: 0s;
    animation-duration: 3s;
    animation-iteration-count: 2;
    animation-name: demo;
  }
  @keyframes demo {
    from {
    animation-timing-function: ease;
    }
    50% {
      background-color: purple;
      animation-timing-function: ease-in;
      transform: translate(20px,30px);
    }
    to {
      background-color: blue;
    }
  }
</style>
</head>
<body>
  <h1>CSS Animation Events Example</h1>
    <p>Click and hold to start the animation. Internet Explorer 10 or later required.</p>
    <div id="mydiv">
      Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.
    </div>

    <script>
      var divObj = document.getElementById("mydiv");
      divObj.addEventListener("animationstart", function (
      ) {
       this.innerHTML = "This is the animation start event";
      }, false);

      divObj.addEventListener("animationend", function () {
        this.innerHTML = "This is the animation end event";
      }, false);

      divObj.addEventListener("animationiteration", function () {
        this.innerHTML = "This is the animation iteration event";
      }, false);

    </script>


</body>
</html>


Справочник по API

Animations

Примеры и учебники

Модернизация веб-страницы с помощью преобразований, переходов и анимаций CSS

Демонстрации тестового выпуска Internet Explorer

Hands On: Animations
Модернизация страниц с помощью преобразований и анимаций CSS
Бета-версия Fish IE

Записи блога IEBlog

Добавление индивидуальных особенностей с помощью переходов и анимаций CSS3
Полностраничные анимации с использованием CSS
Трехмерные преобразования CSS3 в Internet Explorer 10

Спецификация

Анимации CSS

Связанные разделы

Создание потрясающих приложений с помощью анимаций CSS3
Анимация CSS3 с использованием jQuery в качестве альтернативы

 

 

Показ:
© 2014 Microsoft