Вопросы с меткой [css-animation]

Анимация элементов html-страницы, основанная на использовании каскадных таблиц стилей (css).

Фильтрация
Сортировка
Метки
-2 голоса
2 ответа
43 показа

Правильно ли использовать input для выпадающего меню или все же js лучше подключить? middle and up

Вот фрагмент, хотелось бы сразу предусмотреть, что вопрос касается больше middle- и senier-разработчиков .block_menu_left { position: fixed; width: 300px; left: 0; top: 0; bottom: 0; } ....
Никита Серебряков's user avatar
1 голос
2 ответа
84 показа

Как сделать анимацию svg заливки цветом?

Подскажите, пожалуйста, как лучше и правильнее реализовать подобную анимацию заливки? Нужно, чтобы цвет заливал постепенно снизу вверх или наоборот.
Александр's user avatar
0 голосов
1 ответ
27 показов

Как реализовать анимацию при ховере

Как сделать анимацию как на сайте https://moonee.io/ кнопка submit game. При ховере стрелка уходит в правую сторону, и с левой стороны выезжает стрелка другого цвета. Когда убираешь курсор с кнопки, ...
nikitos1234530's user avatar
-2 голоса
1 ответ
55 показов

Убрать мерцание при ховере изменяеться высота карточки и нижний блок отключаеться и кнопка выпает из блока. при наведении снизу появляеться мерцании

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); body,p,h2{ font-family: 'Inter', sans-serif; margin: 0; padding: 0; box-sizing: border-...
Inno4ka's user avatar
0 голосов
0 ответов
17 показов

Анимации отдельных элементов в <TransitionGroup>

Vue2 Есть некоторая часть кода. Элементы появляются снизу из прозрачности в список и идут вверх друг за другом. Через некоторое время элемент удаляется только со сдвигом влево и в прозрачность, а ...
Indam's user avatar
  • 31
3 голоса
2 ответа
242 показа

Анимация BOUNCE

первые ссылки в google дают такие цифры (ниже): --bounce-easing: linear( ... ) Скорее всего, все анимации собраны здесь: https://fullystacked.net/posts/linear/ причем, как будто других не существует. ...
serega da's user avatar
0 голосов
1 ответ
27 показов

Анимация изменения фона блока

Как можно сделать подобную анимацию при наведении на кнопку? https://www.figma.com/proto/6Ag0jEYufnK9Xzm1MkkS88/Buggy?page-id=0%3A1&type=design&node-id=211-305&viewport=-2431%2C-920%2C0.24&...
W1ns's user avatar
  • 9
1 голос
1 ответ
45 показов

css animation деформация свг

не понимаю как мне трансформировать один свг в другой. Вот из первого кадра нужен второй могу приложить кодом свг файлы Первый нижний: <svg width="378" height="458" fill="...
Arder жж's user avatar
0 голосов
1 ответ
30 показов

Как сделать плавный transition для background-image при :hover

Помогите, пожалуйста, у меня есть блок на котором есть изначально залитый однородный цвет и при наведении должно плавно изменится на картинку. Я придумал вариант сначала на блок дать background-image ...
Alexandr Korol's user avatar
0 голосов
1 ответ
27 показов

Как правильно поставить задержку при анимации?

Вообщем, хочу сделать анимацию, ставлю задержку 2 секунды, но элемент остается на странице, и по истечению этих двух секунд делает анимацию. Как сделать так, чтобы он сначала был невидимым, и только ...
floydpower's user avatar
0 голосов
1 ответ
45 показов

Одинаковая анимация работает по-разному

Есть сайт, создан скорее для тренировки. https://seregasmyfavoritesites.on.drv.tw/Site/Kvashenaya/ Рабочий на 99%. На нем есть 2 анимации. Два heading "КВАШЕНАЯ" и "САША". К ним ...
serega da's user avatar
0 голосов
1 ответ
62 показа

Плавная смена css градиента у текста при наведении

.text_number { position: relative; z-index: 1; transition: all 1s; background: linear-gradient(45deg, black, white 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;...
TheFlappy's user avatar
0 голосов
0 ответов
125 показов

Как сделать эффект диагонального линейного градиента внутри файла SVG при наведении курсора

При наведении на SVG сторона .front заменяется стороной .back Нужно, чтобы после переворота по стороне .back проходил диагональный линейный градиент <!DOCTYPE html> <html> <head> ...
V_S's user avatar
  • 11
0 голосов
0 ответов
106 показов

Поворот группы объектов в SVG по оси Y

Не получается достигнуть результата, чтобы при наведении курсора на изображение синий щит (сторона .front) вращался по оси Y, и видно было красный щит (сторона .back) <svg class="logo" aria-...
V_S's user avatar
  • 11
0 голосов
1 ответ
39 показов

CSS Анимации картинок

У меня есть такой код: #photo { bottom: 15%; position: absolute; -webkit-animation: linear infinite; -webkit-animation-name: run; -webkit-animation-duration: 5s; } @-webkit-keyframes ...
Jannie's user avatar
  • 3
0 голосов
0 ответов
39 показов

Как плавно заполнить background у div-а?

Есть блок, который на странице выглядит так: Html выглядит так: <div class="relative rounded-full rating_border overflow-hidden h-9 bg-grey-100 mb-3"> <div class="bg-primary ...
F. Tomas's user avatar
  • 745
-4 голоса
1 ответ
73 показа

Анимация плавного появления при скролле [закрыт]

Как сделать такую анимацию чтобы при скролле вниз она плавно появлялась, а при скролле верх она плавно исчезала. Пример:
whoismatvei's user avatar
1 голос
1 ответ
43 показа

Как анимировать градиент?

У меня есть css код: ::-webkit-scrollbar-thumb { background: -webkit-linear-gradient(270deg, hsl(0deg, 100%, 50%), hsl(20deg, 100%, 50%), hsl(40deg, 100%, 50%), hsl(60deg, 100%, 50%), hsl(80deg, ...
Yar1k's user avatar
  • 1
0 голосов
1 ответ
51 показ

Плавная анимация заголовка

Хотелось бы сделать плавную анимацию скроллирования текста для заголовков при наведении мыши на карточку товаров , а также с возможнотью двигать заголовок по горизонтали захватом заголовка левой ...
Artem Platonov's user avatar
0 голосов
0 ответов
26 показов

Как сделать анимацию на js и css, чтобы одно фото накрывало другое при движение мыши

Все привет. Не пойму как сделать чтобы одно фото накрывало другое при движение мыши. Понятно, что объясняю не понятно, поэтому пример:https://aaa-sitrak.ru/trade-in. Может есть готовое решение?
Pavel 's user avatar
  • 333
1 голос
0 ответов
38 показов

Как назначить один keyframes на отмеченное и неотмеченное состояние input type=radio?

:root { --accent: #1bba4b; --padding: 2px; --m: 40px; --f-m: 16px; } label { background: var(--accent); height: var(--m); padding-left: calc(var(--m) + var(--padding)); ...
another webdev's user avatar
0 голосов
1 ответ
27 показов

Как перенести вниз текст?

Текст Go to listen хочу перенести под текст с анимацией вниз, но не могу, буду благодарен за ответ! * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Montserrat", sans-serif;...
Floyzen's user avatar
  • 11
0 голосов
1 ответ
29 показов

Не работает css анимация

Всем привет !Исользую css анимацию на сайте. Но она не работает на айфонах. В dev tools на компе отображается будто она работает , как только деплою проект она перестает работать только после рефреша ...
Саша Ни's user avatar
0 голосов
1 ответ
159 показов

css: плавное "выдвигание" созданного блока

подскажите, можно ли как-то реализовать плавное "выдвигание" <div /> блока (т.е. появление с 0 высоты до исходной высоты под каким-то другим блоком), если блок не присутствует ...
Zhihar's user avatar
  • 37.1k
0 голосов
1 ответ
50 показов

Как сделать чтоб анимация иконки была и у текста

Как сделать чтоб анимация иконки была и у текста,т.е чтоб при наведении на иконку цвет менялся и у текста ( сердечко .heart ) * { margin: 0; padding: 0; font-family: 'Segoe UI', ...
Atu's user avatar
  • 1
2 голоса
2 ответа
96 показов

Как сделать анимацию вращающегося linear-gradient background?

У меня есть фон с линейным градиентом, и я хочу сделать анимацию на его вращение. Мой код не работает. Чего мне не хватает? Мне нужно вращать сам градиент, а не элемент. Я хочу сделать анимацию, как ...
Oleksii Binetskyi's user avatar
0 голосов
2 ответа
40 показов

CSS-анимация с нажатием "Наведи на меня"

Как сделать анимацию с нажатием "Наведи на меня", чтобы вскочила "Подсказочка!" с блоком? Требуется решение БЕЗ JavaScript .block { position: absolute; width: 600px; ...
Kirill Novikov's user avatar
0 голосов
0 ответов
14 показов

Некорректно работает увеличение картинки на iOS

При открытии картинки, остальные элементы можно скроллить и их видно. Проблема возникает только на iOS устройствах, на андройде или на windows все замечательно Сам скрипт ниже console.log('скрипт ...
Klidevich's user avatar
2 голоса
1 ответ
41 показ

Не работают stroke-dasharray, stroke-dashoffset

Все привет! Столкнулся с проблемой работы с svg path, ранее использовал для прорисовки линий stroke-dasharray, stroke-dashoffset - и все работало, но здесь что-то пошло не так и эти свойства не ...
Serhiy Gerych's user avatar
0 голосов
0 ответов
73 показа

Почему на разных устройствах анимация работает по-разному в одном браузере?

Ссылка на codepen с полным кодом данного элемента: https://codepen.io/VladimirR04/pen/YzjyxyK .carr__card { width: 300px; height: 200px; background-color: #442222; position: absolute; display: ...
Владимир Романенко's user avatar
2 голоса
2 ответа
92 показа

Анимация слов на HTML CSS JS

Подскажите пожалуйста как сделать на HTML, CSS, JS так, чтобы курсор "|" когда возвращается налево он заменял слово на другое + на новый "цвет"-"background-color" и ...
Май я's user avatar
0 голосов
1 ответ
61 показ

Как сделать CSS анимацию слайдер

Всем привет! Вопрос: Есть условный "слайдер" на сайте, все слайды в котором объединены в единый фрейм. Как с помощью CSS или JS сделать анимацию (чтобы по нажатию на кнопку NEXT к ...
Миша's user avatar
1 голос
1 ответ
134 показа

Анимация подчеркивания при наведения курсора

как сделать так, чтобы до наведения курсора подчеркивание тоже было пример: www.studiorhe.com a { color: black; position: relative; cursor: pointer; } a:after { border: none; content: ""...
Rybin's user avatar
  • 35
0 голосов
0 ответов
37 показов

Необходимо чтобы при ударе кирки, появлялись svg-трещины

Я новичок, и я создаю анимацию, используя svg, в которой кирка ударяет по блоку, и после этого должны появляться трещины, начиная с точки, в которую попала сама кирка, в случайном направлении вниз. Я ...
user542976's user avatar
0 голосов
2 ответа
73 показа

Анимация с задержкой, opacity

У меня такая проблема .title1{ opacity: 0; animation: 3s 2s anim-lineUp ease-out; } @keyframes anim-lineUp { 0% { opacity: 0; transform: translateY(80%); } 20% { opacity: 0; } ...
Rybin's user avatar
  • 35
0 голосов
1 ответ
123 показа

Почему появляется резкий переход от последнего слайда к первому в Slick Slider?

Столкнулся с проблемой, делаю простой слайдер при помощи Slick Slider и наблюдаю резкий скачек от последнего слайда к первому если ставить режим infinite: true. $('#slick-slider').slick({ ...
Вячеслав Варов's user avatar
0 голосов
1 ответ
104 показа

Как сделать, чтобы opacity у элемента появлялась плавно слева на право?

Есть текст, который появляется при отображении на экране, надо чтобы он появлялся без перемещений, но с плавным opacity от начала блока с текстом до конца. .showing-text { position: relative; ...
Владимир Романенко's user avatar
0 голосов
1 ответ
50 показов

Возможно ли задавать свойстсва других классов в анимации другого?(@keyframes)

К примеру, существует следующая конструкция: .paragraph_main { font-style: italic; font-weight: 400; padding-top: 00px; color: gray; } .header_main { font-size: 100px; font-...
Дмитрий's user avatar
0 голосов
0 ответов
30 показов

Как сделать эффект появляющегося движущего блока

Вот пример с Яндекс еды, блок доставки похож на блок шторки уведомлений в вашем смартфоне. При вызове блока он выезжает снизу, его можно взять сверху и потянуть, блок будет задвигаться обратно, но ...
emirlan1's user avatar
1 голос
0 ответов
49 показов

Как оформить анимацию при пролистывании страницы?

Имеется анимация отображения текста при пролистывании, так же рядом с текстом расположен пустой div: .animation-position { border-right: #d0d0d0 3px solid; height: 25em; margin-left: 8rem; ...
Владимир Романенко's user avatar
0 голосов
0 ответов
71 показ

Рассчитать временные метки относительно анимации на CSS по уравнению Безье

Есть приложение на Vue.js. Стоит задача реализовать колесо рулетки. При нажатии на кнопку, с бека приходит сгенерированное значение (номер сектора). Колесо должно сделать 4 полных оборота и ...
Эдуард Горшков's user avatar
2 голоса
1 ответ
62 показа

Как реализовать анимацию появления кривых линий?

При загрузке страницы , должны появляться линии по направлению точки(левые направо , правые налево), в конце анимации ,на каждой появляется точка.
Profet's user avatar
  • 387
0 голосов
1 ответ
60 показов

Как плавно убрать задний фон при нажатии?

Сделал смену заднего фона через keyframe с opacity от 0 к 100%, как сделать чтобы при повторном нажатии на кнопку меню цвет не резко переключался на основной, а так же плавно переходил? @keyframes ...
Владимир Романенко's user avatar
0 голосов
2 ответа
51 показ

css/html анимации

как сделать блок в который можно поместить ссылки и он с помощью кнопки выдвигался ( с права на лево )? ( по началу его не должно быть видно )
asd іфв's user avatar
0 голосов
0 ответов
43 показа

Как повесить событие на все элементы при использовании библиотеки GSAP?

Проблема с перебором элементов при использовании библиотеки gsap. Удается получать все элементы в массив, но не могу внедрить код из библиотеки, в js, чтобы все работало. На данный момент анимация ...
jenya1995's user avatar
0 голосов
2 ответа
107 показов

помогите с плавной анимацией "hover", нужно чтобы плавно появлялось и пропадало

.glaz { display: none; position: absolute; top: 60px; left: 50px; } .kartinka:hover + .glaz { display: block; } <body> <img class="kartinka" src="./wear1.jpg" alt="cloth" ...
vitaliy125's user avatar
-1 голос
1 ответ
41 показ

Почему не работает свойство hover?

Вот мой код, я хочу сделать подчеркивание при наведении на input. .form_field_container::after { content: ""; position: absolute; bottom: -2px; height: 2px; background-...
Тв0р0бушек's user avatar
0 голосов
1 ответ
61 показ

Анимация при загрузки сайта HTML CSS

Подскажите пожалуйста как создать такую же анимацию при загрузки сайта как здесь Hyam. Без надписи, чтобы при открытие сайта анимировнно верхняя часть чёрной полосы уезжала вверх, а нижняя вниз. ...
Май я's user avatar
0 голосов
0 ответов
35 показов

Повторяющийся элемент без JS

Подскажите, возможно ли создать повторяющийся элемент DOM дерева без JS (тоесть он только визуально должен отображаться)? Приведу пример body { overflow-x: hidden; margin: 0; font-family: ...
BlackStar1991's user avatar
0 голосов
4 ответа
48 показов

Как сделать фильтры в виде switcher'а

Подскажите пожалуйста как сделать фильтры в виде switcher'а. Не получается оформить их в css Мой код: <style> .filter-border-design { border-radius: 55px; height: 50px; ...
Diana's user avatar
  • 3