Добавьте утилиту animate-spin , чтобы добавить линейную анимацию вращения к таким элементам, как индикаторы загрузки.
<тип кнопки="кнопка" отключена>
Обработка...
Ping
Добавьте утилиту animate-ping , чтобы сделать элемент масштабируемым и затухать, как сигнал радара или рябь воды — полезно для таких вещей, как значки уведомлений.
<диапазон>
<промежуток>
<промежуток>
Pulse
Добавьте утилиту animate-pulse , чтобы элемент плавно появлялся и исчезал — полезно для таких вещей, как загрузчики скелетов.
Добавьте утилиту animate-bounce , чтобы заставить элемент подпрыгивать вверх и вниз — полезно для таких вещей, как индикаторы «прокрутки вниз».
Prefers-reduced-motion
В ситуациях, когда пользователь указал, что он предпочитает уменьшенное движение, вы можете условно применить анимацию и переходы, используя варианты Motion-Safe и Motion-Reduce :
<тип кнопки = "кнопка" отключена>
Обработка
Применяется условно
Наведение, фокусировка и другие состояния
Tailwind позволяет условно применять служебные классы в различных состояниях с помощью модификаторов вариантов. Например, используйте hover:animate-spin , чтобы применять утилиту animate-spin только при наведении.
<дел>
Полный список всех доступных модификаторов состояния см. в документации Hover, Focus и других состояний.
Точки останова и медиа-запросы
Вы также можете использовать модификаторы вариантов для таргетинга медиа-запросов, таких как реагирующие точки останова, темный режим, предпочтения с уменьшенным движением и т. д. Например, используйте md:animate-spin , чтобы применить утилиту animate-spin только к экранам среднего размера и выше.
<дел>
Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.
Использование пользовательских значений
Настройка вашей темы
Анимации по самой своей природе, как правило, сильно зависят от проекта. Анимации, которые мы включаем по умолчанию, лучше всего рассматривать как полезные примеры , и вам рекомендуется настроить анимацию в соответствии с вашими потребностями.
По умолчанию Tailwind предоставляет утилиты для четырех различных примеров анимации, а также утилиту animate-none . Вы можете настроить эти значения, отредактировав theme.animation или theme.extend.animation в файле tailwind.config.js .
Узнайте больше о настройке темы по умолчанию в документации по настройке темы.
Произвольные значения
Если вам нужно использовать одноразовое значение анимации , которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.
<дел>
Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.
Анимация поворота CSS3 | Сообщество Edureka
Нет ответа на этот вопрос. Будьте первыми, кто откликнется.
Ваш ответ
Связанные вопросы в CSS
У меня есть текст, который я хочу… ПОДРОБНЕЕ
22 июня 2022 г. в CSS к
Эдурека • 12 880 баллов • 360 просмотров
CSS
переход
css-анимации
Функции обратного вызова события содержат событие … ПОДРОБНЕЕ
ответил 10 июня 2022 г. в CSS к
Эдурека • 11 450 баллов • 961 просмотр
JavaScript
карусель
анимация
CSS
шлейфы
Как повернуть текст с помощью CSS… ПОДРОБНЕЕ
30 июня 2022 г.
в CSS к
Эдурека • 12 880 баллов • 236 просмотров
CSS
поворот текста
Я пытаюсь смешать свойства background-image и background-size в сокращенном свойстве background. … ПОДРОБНЕЕ
6 июля 2022 г. в CSS к
Эдурека • 12 880 баллов • 116 просмотров
Я провел следующие тесты, чтобы увидеть … ПОДРОБНЕЕ
6 июля 2022 г. в CSS к
Эдурека • 12 880 баллов • 253 просмотра
HTML
CSS
css-анимации
загрузка
Можно ли выбрать первое… ПОДРОБНЕЕ
17 августа 2022 г. в CSS к
Эдурека • 12 880 баллов • 76 просмотров
CSS
css-селекторы
Я заметил, что есть ОШИБКА… ПОДРОБНЕЕ
ответил 18 февраля 2022 г. в других к
Адитья • 7 660 баллов • 131 просмотр
изображение
CSS
анимация
вращение
Только с помощью CSS я хочу повернуть. .. ПОДРОБНЕЕ
22 августа 2022 г. в CSS к
Эдурека • 12 880 баллов • 635 просмотров
CSS
изображение
вращение
Чтобы ответить на ваш вопрос, есть … ПОДРОБНЕЕ
ответил 8 февраля 2022 г. на Яве к
Сохам • 9 700 баллов • 940 просмотров
JavaScript
HTML
CSS
изображение
визуализировать
я хочу связать свой логотип с … ПОДРОБНЕЕ
14 февраля 2022 г.
в других
к
Кичу
• 19 050 баллов
•
2092 просмотра
SEO
изображение
xhtml
CSS
Непрозрачность CSS — цвет фона 23 августа 2022 г.
Как использовать модули css с приложением create-реагировать? 23 августа 2022 г.
Как совместить жирный шрифт и курсив в CSS? 23 августа 2022 г.
д. Например, используйте 
config.js
.. ПОДРОБНЕЕ 