Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Название анимации animation-nameСтр 1 из 3Следующая ⇒
Анимация элементов с помощью свойства 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 позволяет создавать анимацию с помощью ключевых кадров — состояний объекта в определенный момент времени. Синтаксис
Ключевые кадры анимации создаются с помощью ключевых слов from иto (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если 0% или 100% кадры не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимируемого свойства. Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего. Синтаксис
После объявления @keyframes, мы можем ссылаться на него в свойствеanimation:
Название анимации animation-name Свойство задаёт имя анимации. Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно или несколько слов, связанных между собой при помощи пробела - или символа нижнего подчеркивания _. Свойство не наследуется.
|