Главная страница
Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
|
Синтаксис. div { -webkit-animation-name: mymove; animation-name: mymove; }
div {
-webkit-animation-name: mymove;
animation-name: mymove;
}
|
Длительность анимации animation-duration
Свойство устанавливает длительность анимации. Не наследуется. Значение по умолчанию 0.
animation-duration
| Значения:
| | время
| Длительность анимации задается в секундах s или миллисекундах ms.
| initial
| Устанавливает значение свойства в значение по умолчанию.
| inherit
| Наследует значение свойства от родительского элемента.
|
Синтаксис
| div {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
| 4. Временная функция animation-timing-function
Свойство определяет изменение скорости от начала до конца анимации с помощью временных функций. Задаётся при помощи ключевых слов или кривой Безье cubic-bezier(x1, y1, x2, y2). Не наследуется.
animation-timing-function
| Значения:
| | ease
| Функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствуетcubic-bezier(0.25, 0.1, 0.25, 1).
| linear
| Анимация происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0, 0, 1, 1).
| ease-in
| Анимация начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42, 0, 1, 1).
| ease-out
| Анимация начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0, 0, 0.58, 1).
| ease-in-out
| Анимация медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42, 0, 0.58, 1).
| cubic-bezier(x1, y1, x2, y2)
| Позволяет вручную установить значения от 0 до 1. На этом сайте вы сможете построить любую траекторию скорости изменения анимации.
| step-start
| Задаёт пошаговую анимацию, разбивая анимацию на отрезки, изменения происходят в начале каждого шага. Эквивалентно steps(1, start).
| step-end
| Пошаговая анимация, изменения происходят в конце каждого шага. Эквивалентно steps(1, end).
| steps(количество шагов, start|end)
| Ступенчатая временная функция, которая принимает два параметра. Количество шагов задается целым положительным числом. Второй параметр необязательный, указывает момент, в котором начинается анимация. Со значением start анимация начинается в начале каждого шага, со значением end — в конце каждого шага с задержкой. Задержка вычисляется как результат деления времени анимации на количество шагов. Если второй параметр не указан, используется значение по умолчанию end.
| initial
| Устанавливает значение свойства в значение по умолчанию.
| inherit
| Наследует значение свойства от родительского элемента.
|
|