В этой статье демонстрируется процесс добавления многоэтапной анимации и переходов.
Как использовать многошаговую анимацию и переходы?
Чтобы сделать многошаговую анимацию, генерируется серия ключевых кадров. Он определяет ряд изменений, которые необходимо применить к выбранному элементу HTML. Каждый ключевой кадр представляет собой отдельное состояние анимации, и браузер плавно перемещает элемент между этими состояниями. Во время переходов укажите плавное изменение свойств CSS в течение заданного времени в результате взаимодействия с пользователем или изменения состояния.
Давайте рассмотрим практический пример для лучшего понимания:
Пример 1: Применение многошаговой анимации
В этом примере к выбранному элементу HTML будет применена многошаговая анимация. Посетите демонстрацию ниже:
< стиль >
.animationExample {
ширина: 130 пикселей;
высота: 130 пикселей;
фоновый цвет: лесной;
положение: родственник;
анимация: moveAnimate 4s бесконечная плавность входа-выхода;
}
< / стиль >
< тело >
< див сорт '=' 'Пример анимации' >< / див >
< / тело >
В приведенном выше фрагменте кода:
- Во-первых, класс с именем « анимацияПример ” выбран внутри “ <стиль> ' ярлык.
- Далее значения « 130 пикселей » присваиваются « высота ' и ' ширина ' характеристики.
- Кроме того, установите « зеленый лес ' и ' родственник ” как значение для “ фоновый цвет ' и ' позиция ” свойства для улучшения визуализации.
- После этого используйте « анимация ” и установите его равным “ moveAnimate 4s без ограничений », чтобы применить анимацию.
- Значение состоит из четырех частей: первая — это пользовательское имя анимации, вторая — продолжительность времени для завершения, третья — тип анимации, а четвертая — ограничение того, сколько раз эта анимация будет применяться.
- В конце создайте элемент HTML и назначьте « анимацияПример Класс к этому.
Теперь используйте « ключевые кадры ” правило для определения пользовательского “ двигатьсяАнимировать анимация:
@ Ключевые кадры с анимацией {0 % {
левый: 0 ;
цвет фона: синий;
}
пятьдесят % {
слева: 200 пикселей;
фоновый цвет: лесной;
трансформировать: вращать ( 180 градусов ) ;
}
100 % {
левый: 0 ;
цвет фона: синий;
}
}
В приведенном выше блоке кода:
- Во-первых, « @ключевые кадры ” создается вместе с именем пользовательской анимации, которая будет определена.
- Затем создайте блок с именем « 0% », который применяет стили CSS в начале анимации. И используйте « фоновый цвет ' и ' левый CSS-свойства.
- Теперь создайте блок с именем и « пятьдесят% » для стиля в середине анимации. Он обеспечивает значения « 200 пикселей », « зеленый лес ' и ' повернуть (180 градусов) » к свойствам «left», «background-color» и «transform». Это позволяет выбранному элементу повернуться влево на 200 пикселей.
После компиляции вышеуказанного блока кода:
Вывод показывает, что к выбранному элементу HTML была применена многоэтапная анимация.
Пример 2: Применение многошагового перехода
Чтобы применить многошаговый переход, можно использовать селекторы CSS вместе с « переход ' свойство. Посетите приведенный ниже код:
.тускнеть {
непрозрачность: 1;
переход: непрозрачность 1с;
}
.fade:наведите {
непрозрачность: 0;
}
<
/ стиль>
<
тело>
< п сорт '=' 'тускнеть' > Наведите курсор на меня, чтобы увидеть переход. < / п >
< / тело >
Объяснение приведенного выше кода:
- Во-первых, обычай» тускнеть », и значение 1 предоставляется для « непрозрачность ' свойство. Также установите значение « непрозрачность 1с ” к “ переход Свойство CSS. Это устанавливает или удаляет непрозрачность в течение времени продолжительностью « 1с ».
- Далее « :наведите селектор назначен на « тускнеть ' сорт. В нем значение « 0 ” устанавливается в свойство opacity.
- В конце HTML-элемент создается внутри « <тело> », а класс « тускнеть » прилагается к нему.
После завершения этапа компиляции веб-страница выглядит так:
GIF показывает, что к выбранному элементу HTML был применен пользовательский переход затухания.
Заключение
Многоступенчатая анимация и переходы оживляют веб-страницы HTML, добавляя движения и визуальные эффекты. Для анимации « ключевые кадры ” используются вместе с процентом продолжительности, например “ 0% 'это начало', ' пятьдесят% ” – это середина, а “ 100% ” — конец анимации. Для перехода можно использовать селектор CSS вместе с « переход ' сорт. В этой статье продемонстрирован процесс использования многоступенчатой анимации и переходов.