CSS-анимация позволяет анимировать переходы из одной конфигурации стиля CSS в другую. Модуль CSS описывает, как авторы могут анимировать значения свойств CSS с течением времени, используя ключевые кадры. Поведение этих анимаций ключевых кадров можно контролировать, указав их продолжительность, количество повторений и повторяющееся поведение.

Подробнее про css-animations...

Я пытаюсь сделать простую анимацию в CSS, где изображение перемещается по горизонтали. В конце горизонтального движения (то есть в крайней левой и крайней правой точках) я хочу, чтобы изображение перевернулось по вертикальной оси. Я НЕ хочу, чтобы изображение переворачивалось во время горизонтальн....
11 Окт 2021 в 01:45
Я делаю страницу на тему ведьмака в качестве побочного проекта и столкнулся с проблемой. Я сделал страницу алхимии и перечислил все ингредиенты со всеми элементами, которые можно извлечь рядом с ними. Я создал функцию, которая запускает анимацию со следующей логикой: щелчок по ингредиенту запускае....
8 Окт 2021 в 17:34
Я создал элемент сетки, в котором есть 5 элементов, и он выглядит следующим образом: Мне хотелось добавить анимацию, как только мышь наводит курсор на элемент сетки, но я хочу, чтобы она анимировала только grid-img. Я имею в виду, что если пользователь наводит курсор на любое место элемента сетки,....
7 Окт 2021 в 18:02
У меня есть кнопка, которая, когда я нажимаю на нее, создает анимацию для перемещения изображения вверх. Каждый раз, когда я нажимаю кнопку, она должна добавлять другое изображение, которое перемещается вверх. Проблема в том, что если я нажал кнопку более одного раза, первое завершится, но все остал....
7 Окт 2021 в 06:51
У меня есть действительно базовые знания HTML и CSS, и я пытаюсь создать анимацию по ключевым кадрам, которая является автоматическим слайд-шоу. Я скопировал учебник, который работал абсолютно нормально, но изо всех сил пытался настроить его самостоятельно. HTML и CSS: #SLIDE_BG { width: 100%; ....
4 Окт 2021 в 16:16
У меня есть эта анимация сердца из Интернета, div использует ::before и ::after, чтобы сделать форму сердца. Я изменил его, чтобы изменить цвет с красного на розовый. Проблема в том, что я не могу изменить цвет ::before и ::after с помощью анимации thump. Я добавил еще одну анимацию для изменения ....
1 Окт 2021 в 21:40
Я создаю веб-страницу с приведенным ниже SVG, который представляет собой комбинацию двух разных кодов значков SVG. Я хочу изменить видимость значков с видимой на скрытую и наоборот на mouseover. Ниже CSS я написал для того же, но он не работает. #icon1:hover { visibility: hidden; } #icon2:hover....
18 Сен 2021 в 23:26
Я пробую плавающие метки в текстовом поле с помощью css, но после ввода текста и удаления фокуса из текстового поля метка опускается, скрывая содержимое текстового поля. Я сделал это с помощью учебника YouTube, и я не могу понять, где я сделал ошибку. Мне нужна помощь с лейблом, пожалуйста. ....
18 Сен 2021 в 07:31
Я намерен создать родительский квадрат, содержащий четыре меньших дочерних куба. Я бы хотел, чтобы в анимации эти четыре меньших куба перемещались внутри родительского куба. Сначала я делаю один куб и перемещаю его следующим образом: .parent { background-color: aliceblue; height: 400px; wi....
16 Сен 2021 в 09:08
Привет, я пробовал анимацию на сплошной линии 2 пикселя, которая заполняет белый цвет от центра до конца, но потерпела неудачу, потому что она просто заполнялась справа налево и не улучшалась от обратного направления. Может ли кто-нибудь сказать мне, как создать анимацию, которая работает следующим....
12 Сен 2021 в 21:04
Я пытаюсь отобразить проходящую текстовую анимацию на домашней странице своего веб-сайта. Необходимо показать два текста. «вы пришли в нужное место» и «мы заботимся о вас» рядом с приветственным текстом. Почему-то это выглядит так: Я хочу приветствовать! текст должен появиться, за которым быстро....
12 Сен 2021 в 12:03
Я пытаюсь создать меню навигатора, в котором текст переворачивается при наведении курсора. Это код, который я пробовал до сих пор, и встроил видео, которое показывает окончательный результат, которого я пытаюсь достичь. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta h....
11 Сен 2021 в 13:46
Я попытался сделать вращающийся квадрат, который превращался бы в овал при повороте на 180 градусов, проблема, с которой я столкнулся, заключается в том, что при повороте квадрата он перемещается влево, так что верхний левый угол всегда остается неизменным. Визуализация проблемы. Думаю, это связан....
5 Сен 2021 в 18:34
Я работаю над этой CSS-анимацией от Animista, которая не центрирована. Анимация входа начинается и заканчивается не по центру, а анимация выхода начинается в середине и скользит вниз. Это не то, как должна работать анимация. Анимация предназначена для всплывающего окна, которое запускается через 1....
3 Сен 2021 в 21:26
У меня есть эта анимация по ключевым кадрам, в которой я перемещаю точку в квадрате: * { margin: 0; padding: 0; } #dot { height: 10px; width: 10px; background: #000; border-radius: 100%; position: absolute; animation: moveDotOne 2s infinite; transition: all 0.3s; top: 0; lef....
2 Сен 2021 в 10:55
В настоящее время я пытаюсь создать эффект параллакса, используя useEffect для управления моими элементами DOM, но это не реагирует. Поэтому в настоящее время, чтобы исправить это, я пытаюсь получить ширину экрана и добавить условия, чтобы всякий раз, когда экран имеет определенный размер, он долже....
1 Сен 2021 в 10:20
Чтобы избежать проблемы XY, я должен объяснить, что я на самом деле пытаюсь сделать. Я пытаюсь оживить отображение и скрытие div. Моя стратегия состоит в том, чтобы установить max-height как вычисленную высоту из свойства scrollHeight и установить overflow: hidden. Чтобы скрыть это, я могу устано....
31 Авг 2021 в 07:12
Я делаю анимацию гамбургер-меню на панели навигации (где, когда вы щелкаете, она превращается в x, а затем снова в гамбургер-меню, когда вы снова нажимаете), и я не могу заставить анимацию воспроизводиться должным образом. Он щелкает между гамбургером и x и не воспроизводится должное время. Я не у....
30 Авг 2021 в 08:42
Я делаю свой самый первый веб-сайт и пытаюсь добавить анимацию к ссылкам на панели навигации, чтобы их размер и цвет менялись при наведении на них курсора. Проблема в том, что анимация работает хорошо, но как только я удаляю курсор, элементы мгновенно возвращаются к своим исходным стилям без анимац....
30 Авг 2021 в 02:21
Я создал код с фразой I am super strong, я использовал animate из CSS, чтобы слово super медленно исчезало, проблема в том, что я использую position: absolute, поэтому пространство Промежуток, оставленный диапазоном, закрывается, и это происходит мгновенно, в то время как я хотел эффект, который ме....
28 Авг 2021 в 18:01
Я искал это в Stack Overflow и во всем Интернете и не смог найти правильный ответ, извините, если это повторяющийся вопрос. У меня есть список: Как применить переход CSS к списку элементов, один за другим, только при загрузке страницы в React? Мне удалось использовать ReactCSSTransitionGroup, и он ....
Я сделал небольшую анимацию, которая добавляет линию под полем слева направо, когда он зависает, и линия возвращается слева направо, когда мышь не наводит курсор на поле, но проблема в том, что линия возвращается слева направо, когда я обновляю страницу. Есть ли способ отключить анимацию, когда я ....
27 Авг 2021 в 00:53
Я пытаюсь сделать программу плавной прокрутки, и она работает, но мне нужна какая-то анимированная кнопка для нее. Вот мой код: <!DOCTYPE html> <html> <head> <style> /* Styles needed */ html { scroll-behavior: smooth; } ....
26 Авг 2021 в 15:37
У меня есть анимация, в которой при загрузке страницы объект img (и текстовый объект) скользит извне кадра веб-страницы. Он отлично работает, однако единственная очевидная проблема заключается в том, что в самом начале загрузки размер веб-страницы изменяется примерно на. полсекунды. Это связано с....
26 Авг 2021 в 00:34
В настоящее время я пытаюсь добиться следующего эффекта параллакса в React, когда мое изображение находится в фиксированном положении по вертикали, но перемещается слева направо вместе с текстом. Для этого я использовал useEffect, где я беру пиксели общей высоты и соответствующим образом перемещаю с....
25 Авг 2021 в 12:10