Студопедия

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

КАТЕГОРИИ:

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






Название анимации animation-name






Анимация элементов с помощью свойства animation

 

Содержание:

1. Правило @keyframes

2. Название анимации animation-name

3. Длительность анимации animation-duration

4. Временная функция animation-timing-function

5. Анимация с задержкой animation-delay

6. Повтор анимации animation-iteration-count

7. Направление анимации animation-direction

8. Краткая запись анимации animation

9. Проигрывание анимации animation-play-state

10. Состояние элемента до и после воспроизведения анимации animation-fill-mode

11. Множественные анимации

12. Урок: создание анимации

 

Правило @keyframes

CSS3-анимация состоит из двух компонентов: сначала идет объявление@keyframes, которое затем используется в свойстве animation элемента.

Правило @keyframes позволяет создавать анимацию с помощью ключевых кадров — состояний объекта в определенный момент времени.

Синтаксис

 

@keyframes имя анимации {ключевые кадры {css-стили; }}

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

Если 0% или 100% кадры не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимируемого свойства.

Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего.

Синтаксис

 

@-webkit-keyframes shadow { from {text-shadow: 0 0 3px black; } 50% {text-shadow: 0 0 30px black; } to {text-shadow: 0 0 3px black; } } @keyframes shadow { from {text-shadow: 0 0 3px black; } 50% {text-shadow: 0 0 30px black; } to {text-shadow: 0 0 3px black; } }

После объявления @keyframes, мы можем ссылаться на него в свойствеanimation:

 

h1 { font-size: 3.5em; color: darkmagenta; -webkit-animation: shadow 2s infinite ease-in-out; animation: shadow 2s infinite ease-in-out; }

Название анимации animation-name

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

animation-name
Значения:  
имя анимации Имя анимации, которое связывает правило @keyframes с селектором.
none Значение по умолчанию, означает отсутствие анимации. Также используется, чтобы отменить анимацию элемента из группы элементов, для которых задана анимация.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

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

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