Атрибуты: Параметры анимации блочного элемента.

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

  В результате, например, изменение цвета поля элемента, при наведении на него указателя мышки, может произойти не одномоментно, а по некоему заданному временному алгоритму.
  Связать атрибут стиля алгоритма изменения можно как с не активированным элементом, так и, с элементом в псевдоклассе активации.
  В первом случае изменение стиля элемента произойдёт симметрично (наведение мышки - увод мышки) в соответствии с заданным временным алгоритмом.
  Во втором случае заданный алгоритм будет работать только при активации элемента (наведение мышки), а обратный процесс (связанный с уводом мышки) будет мгновенным.
  Атрибуты:
  transition-delay - Устанавливает время, по истечении которого начнется изменение значений атрибутов, установленных значением transition-property.

Формат:

  • transition-delay: Время

Значение:

  transition-duration - Устанавливает время, в течении которого будет происходить изменение значений атрибутов, установленных значением transition-property.

Формат:

  • transition-duration: Время

Значение:

  transition-property - Устанавливает атрибуты стилей определяемого элемента тега, на изменение значения которых распространится действие алгоритма.

Формат:

  • transition-property:
      Список атрибутов
      |all
      |none

Значения:

  • Список атрибутов - Список атрибутов стилей перечисленных через запятую.
  • all - Все атрибуты (умолчание).
  • none - Ни какие атрибуты.
  transition-timing-function - Устанавливает функцию для нелинейного изменения значений атрибутов, установленных значением transition-property, в течение заданного времени.

Формат:

  • transition-timing-function:
      cubic-bezier(X1,Y1,X2,Y2)
      |ease
      |ease-in
      |ease-out
      |ease-in-out
      |linear
      |steps(n[,start])
      |step-start
      |step-end

Значения:

  • cubic-bezier(X1,Y1,X2,Y2) - CSS функция. Изменение значений атрибута во времени описывается кривой Безье третьего порядка. Обратный процесс симметричен.
  • ease - Равномерно ускоренное изменение до середины времени, равномерно замедленное после. Обратный процесс симметричен.
  • ease-in - Равномерно ускоренное изменение. Обратный процесс симметричен.
  • ease-out - Равномерно замедленное изменение. Обратный процесс симметричен.
  • ease-in-out - Равномерно ускоренное изменение первую треть времени, равномерное изменение вторую треть времени, равномерно замедленное изменение третью треть времени. Обратный процесс симметричен.
  • linear - Равномерное изменение (умолчание). Обратный процесс симметричен.
  • steps(n[,start]) - CSS функция. Ступенчатое изменение значений атрибута во времени. Обратный процесс симметричен.
  • step-start - Изменение одним мгновенным "скачком", заданное время игнорируется.
  • step-end - Изменение одним мгновенным "скачком" по прошествии заданного времени.
  transition - Устанавливает общие параметры алгоритма изменения.

Формат:

  • transition:
        Атрибут1] [Длительность1] [Задержка1] [Функция1]
        [,[Атрибут2] [Длительность2] [Задержка2] [Функция2]] ...
        [,[АтрибутN] [ДлительностьN] [ЗадержкаN] [ФункцияN]]

Значения:

   Трансформирование поля элемента.
  Атрибуты стилей трансформирования позволяет трансформировать поле элемента и(или) изменить его позицию и размеры на Web-странице.
  Например, при наведении на поле элемента курсора мышки.
  Атрибут трансформирования можно также связать с алгоритмом изменения или алгоритмом анимации, и тогда трансформирование произойдет по этому алгоритму.
  По сравнению с изменением размеров полей элементов атрибутами width и height анимация с использованием трансформирования более "реактивна".
  Строго говоря, атрибуты трансформирования нельзя отнести к разделу стилей анимации, поскольку они могут применяться и для статических трансформаций. Однако описание этих атрибутов в этом разделе более наглядно.
  Атрибуты:
  transform - Устанавливает трансформацию, смещение и изменение размеров поля элемента.

Формат:

  • transform:
      [perspective(Глубина)]
      [rotate(Угол)]
      [rotateX(Угол)]
      [rotateY(Угол)]
      [rotateZ(Угол)]
      [rotate3d(X,Y,Z,Угол)]
      [scaleX(Масштаб)]
      [scaleY(Масштаб)]
      [scale(МасштабX[,МасштабY])]
      [scale3d(МасштабX[,МасштабY[,МасштабZ]])]
      [[skewX(Угол)]
      [skewY(Угол)]]
      [skew(УголX[,УголY])]
      [translateX((Смещение)]
      [translateY(Смещение)]]
      [translate(СмещениеX [,СмещениеY])]
      [translate3d(СмещениеX[,СмещениеY[,СмещениеZ]])]
      |[ matrix(Аргументы)]
      matrix3d(Аргументы)
      |none
      |inherit

Значения:

  • perspective(Глубина) - Для трансформации устанавливается CSS функция perspective, которая задаёт 3D перспективу поля элемента.
      В отличие от атрибута perspective, transform - значение perspective(Глубина) устанавливает перспективу не для "дочерних" элементов, а непосредственно для этого элемента.
      Такая перспектива имеет смысл, если трансформирование поля этого элемента задано, в том числе, и по его виртуальной оси Z.
  • rotate(Угол) - Для трансформации устанавливается CSS функция rotate, которая задаёт плоский (2D) поворот поля элемента.
      Смещение виртуальной оси Z, относительно которой происходит поворот, устанавливается атрибутом transform-origin.
  • rotateX(Угол) - Для трансформации устанавливается CSS функция rotateX, которая задаёт виртуальный ("3D") поворот поля элемента по часовой стрелке на заданный угол вокруг горизонтальной оси находящейся в плоскости экрана.
      Смещение оси вращения по вертикали устанавливается атрибутом transform-origin.
      Если для "родительского" элемента не установлена перспектива, то в плоскости экрана остается виртуальная проекция поля элемента (к примеру, угол в 90 градусов приводит к невидимости поля, а угол в 180 градусов позволяет посмотреть виртуальную изнанку поля вместе c его зеркально отображенным контентом).
      Если для "родительского" элемента установлена перспектива, то для вращения будет визуально имитировано 3D пространство в поле "родительского" элемента с центром системы координат заданным атрибутом perspective-origin.
  • rotateY(Угол) - Для трансформации устанавливается CSS функция rotateY, которая задаёт виртуальный ("3D") поворот поля элемента по часовой стрелке на заданный угол вокруг вертикальной оси находящейся в плоскости экрана.
      Смещение оси вращения по горизонтали устанавливается атрибутом transform-origin.
      Если для "родительского" элемента не установлена перспектива, то в плоскости экрана остается виртуальная проекция поля элемента (к примеру, угол в 90 градусов приводит к невидимости поля, а угол в 180 градусов позволяет посмотреть виртуальную изнанку поля вместе c его зеркально отображенным контентом).
      Если для "родительского" элемента установлена перспектива, то для вращения будет визуально имитировано 3D пространство в поле "родительского" элемента с центром системы координат заданным атрибутом perspective-origin.
  • rotateZ(Угол) - Для трансформации устанавливается CSS функция rotateZ, которая задаёт поворот поля элемента по часовой стрелке на заданный угол вокруг виртуальной оси Z.
      Смещение оси вращения по горизонтали и вертикали устанавливается атрибутом transform-origin.
      Если для поля элемента не задана перспектива, то функция rotateZ работает аналогично функции rotate.
  • rotate3d(X,Y,Z,Угол) - Для трансформации устанавливается CSS функция rotate3d, которая задаёт виртуальный поворот поля элемента по часовой стрелке одновременно вокруг осей вращения X, Y и Z в виртуальном 3D пространстве.
      К примеру, rotate3d(1,1,1,45deg) задаст поворот вокруг всех трех осей на одинаковый угол в 45 градусов.
      А rotate3d(3,2,1,60deg) задаст поворот вокруг оси X на 60 градусов, вокруг оси Y на 40 градусов, вокруг оси Z на 20 градусов.
  • scaleX(Масштаб) - Для трансформации устанавливается CSS функция scaleX, которая задаёт масштабирование поля элемента в плоскости экрана по горизонтали.
  • scaleY(Масштаб) - Для трансформации устанавливается CSS функция scaleY, которая задаёт масштабирование поля элемента в плоскости экрана по горизонтали.
  • scale(МасштабX[,МасштабY]) - Для трансформации устанавливается CSS функция scale, которая задаёт масштабирование поля элемента в плоскости экрана по горизонтали и вертикали одновременно.
  • scale3d(МасштабX[,МасштабY[,МасштабZ]]) - Для трансформации устанавливается CSS функция scale3d, которая задаёт масштабирование поля элемента в виртуальном 3D пространстве по осям X, Y и Z одновременно.
      Если для поля элемента не задана перспектива, то функция scale3d работает аналогично функции scale.
  • skewX(Угол) - Для трансформации устанавливается CSS функция skewX, которая задаёт плоский (2D) вертикальный прекос (вдоль оси X) поля элемента.
      Смещение оси перекоса по вертикали устанавливается атрибутом transform-origin.
      Высота поля элемента не меняется. При некоторых условиях перекошенное поле элемента может быть обрезано вместе с содержимым.
  • skewY(Угол) - Для трансформации устанавливается CSS функция skewY, которая задаёт плоский (2D) горизонтальный прекос (вдоль оси Y) поля элемента.
      Смещение оси перекоса по горизонтали устанавливается атрибутом transform-origin.
      Высота поля элемента не меняется. При некоторых условиях перекошенное поле элемента может быть обрезано вместе с содержимым.
  • skew(УголX[, УголY]) - Для трансформации устанавливается CSS функция skew, которая задаёт плоский (2D) вертикальный (вдоль оси X) и горизонтальный (вдоль оси Y) прекос поля элемента.
      Смещение осей перекоса по горизонтали и вертикали устанавливается атрибутом transform-origin.
      Высота и ширина поля элемента не меняются. При некоторых условиях перекошенное поле элемента может быть обрезано вместе с содержимым.
  • translateX((Смещение) - Для трансформации устанавливается CSS функция translateX, которая задаёт смещение поля элемента в плоскости экрана по горизонтали (вдоль оси X), без деформации поля элемента.
  • translateY(Смещение) - Для трансформации устанавливается CSS функция translateY, которая задаёт смещение поля элемента в плоскости экрана по вертикали (вдоль оси Y), без деформации поля элемента.
  • translate(СмещениеX[,СмещениеY]) - Для трансформации устанавливается CSS функция translate, которая задаёт смещение поля элемента в плоскости экрана по горизонтали (вдоль оси X) и вертикали (вдоль оси Y) одновременно, без деформации поля элемента.
  • translate3d(СмещениеX[,СмещениеY[,СмещениеZ]]) - Для трансформации устанавливается CSS функция translate3d, которая задаёт смещение поля элемента в виртуальном 3D пространстве по осям X, Y и Z одновременно, без деформации поля элемента.
      Если для поля элемента не задана перспектива, то функция translate3d работает аналогично функции translate.
  • matrix(Аргументы) - Для трансформации устанавливается CSS функция matrix, которая задаёт плоское (2D) преобразование поля элемента.
  • matrix3d(Аргументы) - Для трансформации устанавливается CSS функция matrix3d, которая задаёт преобразование поля элемента в виртуальном 3D пространстве.
      Если для поля элемента не задана перспектива, то функция matrix3d работает аналогично функции matrix.
  •  none - Отсутствие трансформации.
      Это нормальное значение, оно действует по умолчанию.
      Однако оно означает, что поле элемента останется не трансформированным только в поле "родительского" элемента.
      Если поле "родительского" элемента подвергается трансформации, то поле определяемого элемента трансформируется вместе с ним.
      Исключением, в некоторых случаях, являются поля элементов позиционированных как fixed или absolute.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега. То есть поле определяемого элемента подвергнется двойной трансформации по алгоритму заданному "родительским" элементом.
  Значения аргументов всех трансформаций абсолютны, то есть, если, к примеру, поле какого-либо элемента уже было повернуто значением rotateX(45deg), то добавленное, например псевдоклассом активации, значение rotateX(45deg) не приведет ни к какому повороту.
  Расчет геометрии проекции поля элемента в плоскости экрана, при одновременных сложных трансформациях, может быть произведен с помощью матричного исчисления векторной алгебры.
  backface-visibility - Устанавливает видимость обратной стороны поля этого элемента при его трансформациях.
  Обратная сторона поля элемента это его зеркальное отражение.

Формат:

  • backface-visibility: visible | hidden | initial | inherit

Значение:

  • visible - Обратная сторона будет видна (значение по умолчанию).
  • hidden - Обратная сторона будет не видна.
      Поле элемента с обратной стороны будет просзрачным.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  perspective - Устанавливает виртуальное 3D пространство в поле этого элемента для полей "дочерних" элементов.
  Такое пространство создаёт больше визуальных возможностей для трансформации полей "дочерних" элементов.
  Система координат такого пространства задаётся атрибутом perspective-origin.
  Само по себе любое значение атрибута perspective никак не меняет визуальные размеры поля родительского" элемента.

Формат:

  • perspective: Глубина | none | initial | inherit

Значение:

  • Глубина - Глубина перспективы. Линейная величина с единицей измерения.
      Значение = 0 будет означать, что в поле связанного CSS объекта нет перспективы для 3D эффекта для трансформации полей "дочерних" элементов.
      Задание не нулевого значения глубины перспективы означает, что плоскость экрана устройства отображения поля элемента виртуально приближается к пользователю на расстояние равное этому значению.
      В этом случае трансформации полей "дочерних" элементов получат перспективу вдоль перпендикуляра к плоскости экрана устройства отображения поля "родительского" элемента.
  • none - Равносильно значению глубины равной 0 (умолчание).
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  perspective-origin - Устанавливает центр системы координат виртуального 3D пространства заданного атрибутом perspective.
  Центр системы координат устанавливается относительно границ поля элемента, который связан с атрибутом стиля perspective, - то есть "родительского".
  То есть визуально трансформация полей "дочерних" элементов будет зависеть от их положения в поле родительского элемента.
  И, например, вращение поля "дочернего" элемента на фоне поля "родительского" элемента, для которого задана перспектива, визуально будет совсем не таким, как на фоне поля "родителя" без перспективы.

Формат:

  • perspective-origin: X|left|center|right [Y|top|center|bottom]] | initial | inherit

Значение:

  • X - Смещение по горизонтали. Линейная величина с единицей измерения.
  • left - Равносильно значению X = 0.
  • center - Равносильно значению X = 50% (умолчание).
  • right - Равносильно значению X = 100%.
  • Y - Смещение по вертикали. Линейная величина с единицей измерения.
  • top - Равносильно значению Y = 0.
  • center - Равносильно значению Y = 50% (умолчание).
  • bottom - Равносильно значению Y = 100%.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  transform-origin - Устанавливает центр системы координат, относительно которой должно происходить преобразование поля определяемого элемента тега при трансформации.
  Центр системы координат устанавливается относительно границ поля элемента, который связан с атрибутом стиля transform.
  То есть, если установленный центр системы координат будет принадлежать полю элемента, то эта точка останется на своём месте при его преобразовании.
  Устанавливать центр системы координат имеет смысл, если преобразование поля элемента как-то зависит от этой системы координат.
  То есть, если заданная трансформация, масштабирование или перемещение поля элемента, то значение атрибута transform-origin ни как не повлияет на трансформацию.
  Если, по какой-либо причине, атрибут transform-origin применяется с префиксом (например -webkit-), то и атрибут transform должен применяться с этим же префиксом.

Формат:

  • transform-origin: [Горизонтальное смещение] [Вертикальное смещение] [Z-смещение]

Значение:

  • Горизонтальное смещение - смещение от левого верхнего угла поля элемента "вправо" по горизонтали. можно указывать следующими значениями:
    • Линейная величина с единицей измерения.
        Допустимы отрицательные значения.
    • left - "Левая" граница поля элемента.
        Соответствует числовому значению 0 с любой единицей измерения.
    • center - Горизонтальный центр поля элемента.
        Соответствует числовому значению 50%.
    • right - "Правая" граница поля элемента. Соответствует числовому значению 100%.
    Значение по умолчанию - center или 50%.
  • Вертикальное смещение - смещение от левого верхнего угла поля элемента "вниз" по вертикали. можно указывать следующими значениями:
    • Линейная величина с единицей измерения.
        Допустимы отрицательные значения.
    • top - "Верхняя" граница поля элемента.
        Соответствует числовому значению 0 с любой единицей измерения.
    • center - Вертикальный центр поля элемента.
        Соответствует числовому значению 50%.
    • bottom - "Нижняя" граница поля элемента.
        Соответствует числовому значению 100%.
    Значение по умолчанию - center или 50%.
  • Z-смещение - Смещение по виртуальному перпендикуляру от плоскости экрана в сторону пользователя.
      Линейная величина с единицей измерения.
      Допустимы отрицательные значения.
      Значение по умолчанию - 0 с любой единицей измерения.
      Имеет смысл, только если трансформация задана 3D-функцией.
  transform-style - Устанавливает, будет ли поле элемента плоским, или у него будет виртуальный объём.
  Если поле элемента плоское, то все трансформации полей "дочерних" элементов не смогут "погрузить" в него эти поля.
  Визуально такие трансформации будут происходить "перед" полем этого "родительского" элемента.

  Если поле элемента будет иметь виртуальный объём, то, при трансформации полей "дочерних" элементов, эти поля могут "погружаться" в него - пример.

Формат:

  • transform-style: flat | preserve-3d | initial | inherit

Значение:

  • flat - Поле элемента будет плоским (умолчание).
  • preserve-3d - Поле элемента имеет виртуальный объём.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  Алгоритм анимации стилей.
  Атрибуты стиля анимации могут установить алгоритм анимированного изменения других стилей поля элемента тега.
  Анимация, в отличие от изменения, не требует её инициирования на Web-странице с помощью селекторов псевдоклассов активации. Поэтому связать атрибут алгоритма анимации можно с любым селектором.
  Атрибуты:
  @keyframes - Устанавливает кадр для цикла анимации.
  @keyframes - не является атрибутом CSS-стиля. @keyframes, не являясь также селектором CSS, формирует отдельное CSS-правило, которое затем используется атрибутами стилей анимации.

Формат:

  • @keyframes Имя { Этап {Атрибуты} Этап {Атрибуты}... Этап {Атрибуты} }

Значения:

  • @keyframes - Ключевое слово.

  • Имя - Допустимый символьный код, назначенный именем кадра.
  • Этап - Идентификатор этапа цикла. Число с единицей измерения % (процент).
      Определяет время (процентом от общего времени цикла анимации), по окончании которого поле элемента изменится от исходного состояния, до состояния заданного атрибутами.
      Соответственно пропорционально уменьшается время для прохождения других этапов цикла.

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

      При равенстве значений идентификаторов этапа обработается последний из них в списке, остальные будут проигнорированы.

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

      Идентификатор первого этапа можно заменить ключевым словом from, что соответствует 0%.

      Идентификатор последнего этапа можно заменить ключевым словом to, что соответствует 100%. Каждый этап формирует своё CSS-правило.
  • Атрибуты - Список атрибутов стилей со своими значениями.
  @keyframes позволяет перечислить атрибуты стилей с их значениями, не привязывая их непосредственно к элементу, поле которого будет анимировано этими атрибутами.
  С этим элементом связываются только сами атрибуты стилей анимации, которые сразу же и запускают его анимацию.

  В этом и есть принципиальное отличие от алгоритма изменения, который ссылается на атрибуты, значения которых могут измениться в результате какого-либо предусмотренного воздействия, и которые связаны с элементом только на случай этого воздействия.
  animation-name - Устанавливает связь с кадром цикла анимации для определяемого элемента тега.

Формат:

  • animation-name: Имя1 [,Имя2]...[,ИмяN]

Значение:

  • Имя - Имя кадра для цикла анимации.
  animation-delay - Устанавливает время (в секундах) до начала цикла анимации для определяемого элемента тега.

Формат:

  • animation-delay: Время

Значение:

  • Время - CSS значение time единицей измерения s.
      Можно указать отрицательное значение, тогда анимация начнётся без задержки, но тогда на это значение будет уменьшено время цикла анимации.
  animation-direction - Устанавливает последовательность в цикле анимации для определяемого элемента тега.

Формат:

  • animation-direction:
      alternate
      |alternate-reverse
      |normal
      |reverse

Значение:

  • alternate - В количество циклов входят как прямые циклы, так и симметричные обратные.
  • alternate-reverse - Сначала выполняется анимация последнего этапа, затем предпоследнего и так далее.
      Если значение идентификатора последнего этапа равно 100%, то цикл начинается с состояния поля элемента заданного атрибутами последнего этапа.
      В количество циклов входят как обратные циклы, так и симметричные прямые.
  • normal - В количество циклов входят только прямые циклы (умолчание.).
      В одном цикле сначала выполняется анимация первого этапа, затем второго и так далее.
  • reverse - В количество циклов входят только обратные циклы.
      В одном цикле сначала выполняется анимация последнего этапа, затем предпоследнего и так далее.
      Если значение идентификатора последнего этапа равно 100%, то цикл начинается с состояния поля элемента заданного атрибутами последнего этапа.
  animation-duration - Устанавливает время (в секундах) цикла анимации для определяемого элемента тега.

Формат:

  • animation-duration: Время

Значение:

  animation-fill-mode - Устанавливает состояние поля определяемого элемента после завершения всех циклов анимации.
  Имеет значение только если цикл анимации замкнутый.

Формат:

  • animation-fill-mode:
      backwards
      |both
      forwards|
      none

Значение:

  • backwards - В исходное состояние.
  • both - В исходное состояние или в состояние заданное последним этапом, в зависимости от того, куда приведут все циклы анимации.
  • forwards - В состояние заданное последним этапом или в исходное состояние, в зависимости от того, куда приведут все циклы анимации.
  • none - Всегда в исходное состояние. (Умолчание.)
  animation-iteration-count - Устанавливает количество циклов анимации для определяемого элемента тега.

Формат:

  • animation-iteration-count:
      Число
      |infinite

Значения:

  • ЧислоЦелое число - количество циклов (по умолчанию = 1).
  • infinite – Бесконечное количество циклов.
  animation-play-state - Устанавливает или снимает паузу в цикле анимации для определяемого элемента тега .
  Логично применять к элементам, определяемым псевдоклассами активации.

Формат:

  • animation-play-state:
      paused
      |running

Значения:

  • paused – Пауза.
  • running – Возобновление.
  animation-timing-function - Устанавливает функцию для нелинейности цикла анимации на заданном временном интервале для определяемого элемента тега.

Формат:

  • animation-timing-function:
      cubic-bezier(x1,x2,x3,x4)
      |ease
      |ease-in
      |ease-out
      |ease-in-out
      |linear
      |steps(n[,start])
      |step-start
      |step-end

Значения:

  • cubic-bezier(X1,Y1,X2,Y2) - CSS функция. Изменение значений атрибута во времени описывается кривой Безье третьего порядка. Обратный процесс симметричен.
  • ease - Равномерно ускоренная анимация до середины времени, равномерно замедленная после (умолчание).
  • ease-in - Равномерно ускоренная анимация.
  • ease-out - Равномерно замедленная анимация..
  • ease-in-out - Равномерно ускоренная анимация до двух третей времени, равномерно замедленная после. Обратный процесс симметричен.
  • linear - Равномерноя изменение.
  • steps(n[,start]) - CSS функция. Ступенчатое изменение значений атрибута во времени. Обратный процесс симметричен.
  • step-start - Анимация одним мгновенным "скачком", заданное время игнорируется.
  • step-end - Анимация одним мгновенным "скачком" по прошествии заданного времени.
  animation - Устанавливает общие параметры цикла анимации для определяемого элемента тега.

Формат:

  • transition: Имя [Время цикла] [Функция] [Задержка цикла][Количество циклов] [Последовательность цикла]

Значения:


Пример плоской анимации:

<STYLE>
  @-webkit-keyframes animac
   {
    10% { background-color: #F0F8FF; color: #778899; transform: translate(100px,200px) }
    20% { background-color: #ADD8E6; color: #F0F8FF; transform: translate(100px,200px) rotate(-15deg )}
    30% { background-color: #778899; color: #F0FFFF; transform: translate(100px,200px) rotate(-15deg) scale(1.5,1.5) }
    40% { background-color: #ADD8E6; color: #F0F8FF; transform: translate(100px,200px) rotate(-15deg) scale(1.5,1.5) skew(30deg,30deg }
    100% { background-color: #F0F8FF; color: #778899; transform: translate(100px,200px) scale(1.5,1.5) skew(30deg,30deg) rotate(45deg) }
   }
  .anim { width: 200px; height: 50px; -webkit-animation-name: animac; -webkit-animation-duration: 10s; -webkit-animation-direction: alternate; -webkit-animation-fill-mode: both; -webkit-animation-iteration-count: infinite }
  .anim:hover { -webkit-animation-play-state: paused }
  .trans { width: 200px; height: 50px; transition: 10s; }
  .trans:hover { background-color: #778899; color: #F0FFFF; transform: translate(100px,200px) scale(1.5,1.5) skew(30deg,30deg) rotate(90deg) }
</STYLE>
...........
<DIV CLASS="anim" ALIGN=center>
  Анимация (наведите мышку)
</DIV>
<DIV CLASS="trans" ALIGN=center>
  Изменение (наведите мышку)
</DIV>
Анимация (наведите мышку)
Изменение (наведите мышку)





















Пример "3D" анимации:

<STYLE>
  .field2 {width: 350px; height: 400px; position: relative;}
  #dv1 { transform: rotateX(30deg) rotateY(-90deg);}
  .dvv {position: absolute; left: 60px; top: 40px;}
  .field2:hover #dv1 {transform: rotateX(0deg) rotateY(0deg); transition-duration: 5s; transition-delay: 5s;}
  .field2:hover #dv2 {transform: rotateX(30deg) rotateY(90deg); transition-duration: 5s;}
</STYLE>
...........
<FIELDSET class="field2">
  <DIV id=dv1 class="dvv">
    <IMG SRC="../content/Дама.jpg">
  </DIV>
  <DIV id=dv2 class="dvv">
    <IMG SRC="../content/крап.jpg">
  </DIV>
</FIELDSET>
Наведите мышку.

Пример 3D анимации:

<STYLE>
  .field3 {width: 350px; height: 400px; position: relative; perspective-origin: 47.5% 50%; perspective: 500px;}
  #dz1 { transform: rotateX(90deg);}
  .dzv {position: absolute; left: 60px; top: 40px;}
  .field3:hover #dz1 {transform: rotateY(0deg); transition-duration: 5s; transition-delay: 5s;}
  .field3:hover #dz2 {transform: rotateY(-90deg); transition-duration: 5s;}
</STYLE>
...........
<FIELDSET class="field3">
  <DIV id=dz1 class="dzv">
    <IMG SRC="../content/Дама.jpg">
  </DIV>
  <DIV id=dz2 class="dzv">
    <IMG SRC="../content/крап.jpg">
  </DIV>
</FIELDSET>
Наведите мышку.


Пример transform-style (Chrome):

<STYLE>
  #divx {background: beige; position: relative; left: 20px; padding: 20px; perspective-origin: 50% 50%;
    perspective: 500px; transform-style: preserve-3d;}
  #divx1 {background: linear-gradient( blue, red, black); position: absolute}
  #divx2 {background: linear-gradient( blue, red, black); position: absolute; transform: rotateX(60deg);}
  #divy {background: beige; position: relative; left: 20px; padding: 20px; perspective-origin: 50% 50%;
     perspective: 500px; transform-style: flat;}
  #divy1 {background: linear-gradient( blue, red, black); position: absolute}
  #divy2 {background: linear-gradient( blue, red, black); position: absolute; transform: rotateX(60deg);}
</STYLE>
...........
  <div id="divx" STYLE="width: 310px; height: 160px; border: 1px solid black">
    <div id="divx1" STYLE="width: 300px; height: 150px; border: 1px solid black"></div>
    <div id="divx2" STYLE="width: 300px; height: 150px; border: 1px solid black">Рыба!</div>
  </div>
  <div id="divy" STYLE="width: 310px; height: 160px; top: 10px; border: 1px solid black">
    <div id="divy1" STYLE="width: 300px; height: 150px; border: 1px solid black"></div>
    <div id="divy2" STYLE="width: 300px; height: 150px; border: 1px solid black">Рыба!</div>
  </div>
Рыба!
Рыба!