В этой статье демонстрируется практическая демонстрация одновременного воспроизведения/добавления нескольких анимаций CSS.
Как воспроизвести несколько CSS-анимаций одновременно?
Применяя несколько анимаций CSS одновременно, разработчики могут легко создавать более привлекательные интерфейсы. Чтобы одновременно воспроизводить несколько анимаций CSS, присвойте каждой из них уникальное имя и примените эти имена к одному и тому же или к отдельным компонентам на странице.
Следуйте приведенной ниже процедуре, чтобы воспроизвести/добавить несколько анимаций одновременно.
Шаг 1: Создание структуры
Во-первых, создайте элемент HTML, в котором анимация будет применена на следующих шагах. Например, изображение будет вставлено:
< див сорт '=' 'охватывать' >
< изображение источник '=' 'книга.jpg' высота '=' '100 пикселей' ширина '=' '100 пикселей' сорт '=' 'оживить' >
< / див >
В приведенном выше фрагменте кода:
- Во-первых, путь к изображению устанавливается в « источник атрибут.
- Далее значение « 100 пикселей » предоставляется свойствам CSS «width» и «height».
- Также установите значение « оживлять ” к “ сорт атрибут.
Шаг 2: Настройка анимации
“ ключевые кадры ” используются для создания пользовательских анимаций в соответствии с потребностями веб-страницы. Например, в приведенном ниже фрагменте кода создаются две анимации:
@-webkit-ключевые кадры вращаются {100 % {
трансформировать: вращать ( 180 градусов ) ;
}
}
Масштаб @-webkit-keyframes {
100 % {
преобразование: масштабX ( 1 ) масштабY ( 1 ) ;
}
}
В приведенном выше фрагменте кода:
- Во-первых, « @-webkit-ключевые кадры 'используется механизм для создания ' вращаться ' и ' вращать названные анимации.
- Далее используйте « трансформировать ” свойство, которое имеет значение “ повернуть() ' в ' вращаться ” анимационное тело. Эта функция поворачивает элемент на угол « 180 градусов ».
- После этого установите анимацию, которая увеличивает или расширяет исходный элемент с коэффициентом « 1 ” в обоих “ Икс ' и ' И ось в « шкала ” анимационное тело.
Шаг 3. Применение анимации к HTML-элементам
Внутри части CSS выберите класс « оживлять », который присваивается « <изображение> ” и укажите следующие свойства CSS:
.анимировать {положение: абсолютное;
левый: 60 %;
ширина : 110 пикселей;
высота : 110 пикселей;
поле: -40px 0 0 -40px;
-webkit-анимация: масштаб 3s бесконечный линейный;
-webkit-анимация: спин 2с бесконечный линейный;
}
Описание свойств, используемых в приведенном выше блоке кода:
- Сначала установите значение « абсолютный 'к CSS' позиция ' свойство. Он выравнивает « изображение ” в соответствии с анимацией.
- Затем укажите значения « 60% », « 110 пикселей ' и ' 110 пикселей 'к CSS' левый », « ширина ' и ' высота ' характеристики. Эти свойства используются для установки положения и размера элемента.
- После этого установите значение « шкала 3s бесконечная линейная ” к “ -вебкит-анимация Свойство CSS.
- И « 3 с ” – продолжительность этой анимации, “ бесконечный ” – продолжительность анимации, а “ линейный ” — это направление анимации.
- В конце укажите значения « спин 2s бесконечный линейный 'к CSS' -вебкит-анимация ' свойство. Это свойство добавляет вторую анимацию с именем « вращаться ' на ' изображение элемент.
После компиляции вышеуказанного блока кода анимация выглядит так:
Приведенный выше gif иллюстрирует, что только « вращаться анимация воспроизводится на целевом элементе.
Шаг 4. Воспроизведение нескольких анимаций для HTML-элементов
Как и в предыдущем шаге, к элементу была применена только одна анимация. Это связано с тем, что одному и тому же « -вебкит-анимация ' свойство.
Чтобы решить эту проблему, оберните целевой элемент другим элементом HTML. Как « див ' уже используется в качестве оболочки на первом шаге, выберите его ' охватывать ” и обновите код, например:
.анимировать {положение: абсолютное;
левый: 60 %;
ширина : 110 пикселей;
высота : 110 пикселей;
поля:-40px 0 0 -40px;
-webkit-анимация: масштаб 3s бесконечный линейный;
}
. охватывать {
положение: родственник;
верх: 160 пикселей;
-webkit-анимация: спин 2с бесконечный линейный;
}
В приведенном выше коде:
- Сначала « оживлять » остается прежним и из него удаляется только вторая анимация, которая помещается в « охватывать ' сорт.
- После этого установите положение с помощью кнопки « позиция ' и ' вершина ' характеристики.
После выполнения приведенного выше фрагмента кода веб-страница теперь выглядит так:
Вывод показывает, что обе анимации были применены к выбранному элементу HTML одновременно.
Заключение
Чтобы применить несколько свойств CSS, оберните элемент элементами HTML и примените к ним анимацию, чтобы каждый элемент HTML содержал одну анимацию. Поскольку дочернее свойство наследует анимацию, примененную к родительскому элементу HTML, применяется несколько анимаций, не вызывая ошибок или двусмысленности для компилятора. Это процедура для одновременного воспроизведения/добавления нескольких CSS-анимаций.