Safari

CSS Анимация

Использование анимации

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

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

Установка свойств перехода

Для создания анимированного перехода, сперва указывают, какие свойства CSS должны быть анимированы, используя свойство -webkit-transition-property, это cвойство CSS, которое принимает другие свойства CSS в качестве аргументов. Далее устанавливают продолжительность анимации с использованием свойства -webkit-transition-duration.

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

<div style="
          -webkit-transition-property: opacity;
          -webkit-transition-duration: 2s;"
  onclick="this.style.opacity=0">
<p>Нажми меня и я исчезну )))</p>
</div>

Есть два особых свойства перехода: all и none

  • -webkit-transition-property: all;
  • -webkit-transition-property: none;

Установка свойства перехода в all приводит к анимированному переходу всех измененных свойств элемента. Установка в none приводит к отмене анимации свойств элемента.

Чтобы настроить анимацию для нескольких свойств, передайте несколько разделенных запятыми параметров -webkit-transition-property и -webkit-transition-duration. Порядок параметров определяет, как параметры перехода применяются. Например, листинг ниже определяет двухсекундный -background-color переход и четырех секундный переход opacity.

div.zoom-fade {
    -webkit-transition-property: background-color, opacity;
    -webkit-transition-duration: 2s, 4s;
}

Использование функций тайминга

Функции тайминга позволяют переходу измененять скорость на протяжении его действия. Установить функцию тайминга можно с помощью свойства -webkit-transition-timing-function. Выберите одну из встроенных функций синхронизации: ease, ease-in, ease-out или ease-in-out или укажите cubic-bezier и передайте параметры управления для создания собственных функций синхронизации. Например, следующий фрагмент определяет 1- второй переход, изменения непрозрачности, используя ease-in функцию, которая начинается медленно, а затем ускоряется:

style="-webkit-transition-property: opacity;
       -webkit-transition-duration: 1s;
       -webkit-timing-function: ease-in;"

Используя тайминг функцию cubic-bezier, вы можете, например, определить функцию, которая начинается медленно, ускоряется, а затем замедляется в конце. Функция таймера задается с помощью кривой Безье третьего порядка, которая определяется четырьмя контрольными точками, как показано на рисунке ниже. Первая и последняя контрольные точки всегда устанавливаются в (0,0) и (1,1), так что вы указываете две промежуточных контрольных точки. Точки указываются с помощью х, у координат, х с выраженной как часть общей длительности и у выраженной в виде доли от общего изменения.

Определение пользовательской тайминг функции

div.zoom-fade {
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 2s;
    -webkit-transition-timing-function: cubic-bezier(0.5, 0.2, 0.9, 0.4);
}

Задержка начала

По умолчанию, переход анимации начинается, как только одно из указанных свойств CSS измененилось. Чтобы указать задержку для перехода с момента изменения свойства и время начала анимации, используйте свойство -webkit-transition-delay. Например, следующий фрагмент определяет анимацию, которая начинается через 100 мс после изменения свойства:

.delay-fade {
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: 100ms;
}

Обработка промежуточных состояний и событий

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

Чтобы определить, когда переход завершен, установите обработчик JavaScript события для DOM элемента, который посылается в конце перехода. Событие является экземпляром WebKitTransitionEvent, и его тип webkitTransitionEnd.

Пример: Обнаружение событий конца перехода.

document.body.addEventListener( 'webkitTransitionEnd', function(event) { alert( "Finished transition!" ); }, false );

Анимация по ключевым кадрам

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

Анимация по ключевым кадрам включает следующие возможности:

  • Выбор любого количества свойств CSS, чтобы изменить и определить точки на временной шкале, которые имеют конкретные состояния.
  • Анимация между двумя определенными точками включается автоматически, но может руководствоваться, определенной функцией тайминга.
  • Вы запускаете анимацию по ключевым кадрам в явном виде.
  • Ключевой кадр анимации может быть настроен на повтор конечное число раз или на повтор до бесконечности, протекающий в том же направлении, каждый раз, или переменно вперед и назад.
  • Анимации по ключевым кадрам могут быть приостановлены ​​и возобновлены.
  • Все элементы в классе можно анимировать, как часть одной анимации.

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

Создание анимации по ключевым кадрам

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

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

  1. Создайте именованный набор ключевых кадров, используя CSS правило @-webkit-keyframes. Набор должен включать по меньшей мере один ключевой кадр.
  2. Установите свойство -webkit-animation-duration в положительное ненулевое значение.
  3. Назначьте свойству -webkit-animation-name имя ключевого набора.

В следующем примере определяются один ключевой кадр в наборе с именем glow. Ключевой кадр определяет синий цвет фона. В примере определяется псевдокласс div:hover как имеющий анимацию с именем glow и длительностью анимации 1 с. При наведении указателя мыши или касании любого div элемента, он становится синим в течение одной секунды.

<html>
<head>
    <title>Blue Glow</title>
<style>
@-webkit-keyframes glow {
    0% { background-color: blue; }
    100% { background-color: blue; }
}
 
div:hover {
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;
}
</style>
</head>
<body>
   <div>       <p>Hover turns me briefly blue.</p>
   </div>
   <div>       <p>Me too.</p>
   </div>
</body>
</html>
 

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

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

В правиле стиля можно задать любое количество свойств CSS.

Следующий листинг показывает набор ключевых кадров анимации, с именем wobble-glow и ключевыми кадрами, перемещающими элемент назад и вперед, изменяя цвет его фона с течением времени. Свойство left создает анимацию назад и вперед между 75px и 150px, а цвет фона изменяется по циклу между красным, белым и синим.

@-webkit-keyframes wobble-glow {
      0%  { left: 100px; background: red;}
      40% { left: 150px; background: white;}
      60% { left: 75px; background: blue;}
      100% { left: 100px; background: red;}}
}

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

Одним из свойств CSS, которые можно указать в ключевом кадре -webkit-animation-timing-function. Это свойство определяет скорость изменения для анимации от текущего до следующего ключевого ключевого кадра. См. "Использование функций тайминга".

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

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

Вы должны установить -webkit-animation-duration и -webkit-animation-name свойства для того, чтобы просмотреть анимацию. Вы также можете установить следующие свойства анимации:

  • -webkit-animation-iteration-count - Установка количества повторов анимации. Значение по умолчанию 1. Может быть установлено в целое число или в infinite (бесконечность).
  • -webkit-animation-direction - Указывает повторяющейся анимации либо действовать в том же направлении, каждый раз, или в альтернативных направлениях. Может быть установлено в normal (по умолчанию) или alternate. Если установлено alternate, анимация идет вперед и назад- от 0% до 100% и от 100% до 0%-на альтернативных итерациях. Значение счетчика webkit-animation-iteration-count должно быть больше 1, или это свойство не будет иметь эффекта.
  • -webkit-animation-play-state - Приостановить или возобновить анимацию. Задайте в этом свойстве paused, чтобы остановиться и или running (по умолчанию) для продолжения анимации.
  • -webkit-animation-delay - Время ожидания между запуском анимации и началом анимации (по умолчанию ).
  • -webkit-animation-timing-function - Функция тайминга, по умолчанию, используемая между ключевыми кадрами. Вы можете переопределить это свойство для каждого ключевого кадра, указав дополнительные функции тайминга в рамках ключевых кадров.
  • -webkit-animation-fill-mode = Указывает анимации изменить стиль элемента до или после анимации.

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

    Если установлено forwards, состояние на конец анимации является постоянным.

    Если установлено в backwards, начальное состояние анимации применяется во время задержки перед началом анимации.

    При установкев both, применяются оба forwards и backwards.

 
 
homeЗаметили ошибкукарта сайта 
   Made on a Mac