Студопедия

Главная страница Случайная страница

КАТЕГОРИИ:

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Синтаксис. 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 Наследует значение свойства от родительского элемента.

Поделиться с друзьями:

mylektsii.su - Мои Лекции - 2015-2024 год. (0.009 сек.)Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав Пожаловаться на материал