Вопросы с меткой [css-animation]
Анимация элементов html-страницы, основанная на использовании каскадных таблиц стилей (css).
833
вопроса
-2
голоса
2
ответа
43
показа
Правильно ли использовать input для выпадающего меню или все же js лучше подключить? middle and up
Вот фрагмент, хотелось бы сразу предусмотреть, что вопрос касается больше middle- и senier-разработчиков
.block_menu_left {
position: fixed;
width: 300px;
left: 0;
top: 0;
bottom: 0;
}
....
1
голос
2
ответа
84
показа
Как сделать анимацию svg заливки цветом?
Подскажите, пожалуйста, как лучше и правильнее реализовать подобную анимацию заливки?
Нужно, чтобы цвет заливал постепенно снизу вверх или наоборот.
0
голосов
1
ответ
27
показов
Как реализовать анимацию при ховере
Как сделать анимацию как на сайте https://moonee.io/ кнопка submit game. При ховере стрелка уходит в правую сторону, и с левой стороны выезжает стрелка другого цвета. Когда убираешь курсор с кнопки, ...
-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-...
0
голосов
0
ответов
17
показов
Анимации отдельных элементов в <TransitionGroup>
Vue2
Есть некоторая часть кода. Элементы появляются снизу из прозрачности в список и идут вверх друг за другом. Через некоторое время элемент удаляется только со сдвигом влево и в прозрачность, а ...
3
голоса
2
ответа
242
показа
Анимация BOUNCE
первые ссылки в google дают такие цифры (ниже):
--bounce-easing: linear( ... )
Скорее всего, все анимации собраны здесь:
https://fullystacked.net/posts/linear/
причем, как будто других не существует. ...
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&...
1
голос
1
ответ
45
показов
css animation деформация свг
не понимаю как мне трансформировать один свг в другой. Вот из первого кадра нужен второй
могу приложить кодом свг файлы
Первый нижний:
<svg width="378" height="458" fill="...
0
голосов
1
ответ
30
показов
Как сделать плавный transition для background-image при :hover
Помогите, пожалуйста, у меня есть блок на котором есть изначально залитый однородный цвет и при наведении должно плавно изменится на картинку. Я придумал вариант сначала на блок дать background-image ...
0
голосов
1
ответ
27
показов
Как правильно поставить задержку при анимации?
Вообщем, хочу сделать анимацию, ставлю задержку 2 секунды, но элемент остается на странице, и по истечению этих двух секунд делает анимацию. Как сделать так, чтобы он сначала был невидимым, и только ...
0
голосов
1
ответ
45
показов
Одинаковая анимация работает по-разному
Есть сайт, создан скорее для тренировки.
https://seregasmyfavoritesites.on.drv.tw/Site/Kvashenaya/
Рабочий на 99%. На нем есть 2 анимации.
Два heading "КВАШЕНАЯ" и "САША".
К ним ...
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;...
0
голосов
0
ответов
125
показов
Как сделать эффект диагонального линейного градиента внутри файла SVG при наведении курсора
При наведении на SVG сторона .front заменяется стороной .back
Нужно, чтобы после переворота по стороне .back проходил диагональный линейный градиент
<!DOCTYPE html>
<html>
<head>
...
0
голосов
0
ответов
106
показов
Поворот группы объектов в SVG по оси Y
Не получается достигнуть результата, чтобы при наведении курсора на изображение синий щит (сторона .front) вращался по оси Y, и видно было красный щит (сторона .back)
<svg class="logo" aria-...
0
голосов
1
ответ
39
показов
CSS Анимации картинок
У меня есть такой код:
#photo {
bottom: 15%;
position: absolute;
-webkit-animation: linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
@-webkit-keyframes ...
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 ...
-4
голоса
1
ответ
73
показа
Анимация плавного появления при скролле [закрыт]
Как сделать такую анимацию чтобы при скролле вниз она плавно появлялась, а при скролле верх она плавно исчезала.
Пример:
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, ...
0
голосов
1
ответ
51
показ
Плавная анимация заголовка
Хотелось бы сделать плавную анимацию скроллирования текста для заголовков при наведении мыши на карточку товаров , а также с возможнотью двигать заголовок по горизонтали захватом заголовка левой ...
0
голосов
0
ответов
26
показов
Как сделать анимацию на js и css, чтобы одно фото накрывало другое при движение мыши
Все привет. Не пойму как сделать чтобы одно фото накрывало другое при движение мыши. Понятно, что объясняю не понятно, поэтому пример:https://aaa-sitrak.ru/trade-in. Может есть готовое решение?
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));
...
0
голосов
1
ответ
27
показов
Как перенести вниз текст?
Текст Go to listen хочу перенести под текст с анимацией вниз, но не могу, буду благодарен за ответ!
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;...
0
голосов
1
ответ
29
показов
Не работает css анимация
Всем привет !Исользую css анимацию на сайте. Но она не работает на айфонах. В dev tools на компе отображается будто она работает , как только деплою проект она перестает работать только после рефреша ...
0
голосов
1
ответ
159
показов
css: плавное "выдвигание" созданного блока
подскажите, можно ли как-то реализовать плавное "выдвигание" <div /> блока (т.е. появление с 0 высоты до исходной высоты под каким-то другим блоком), если блок не присутствует ...
0
голосов
1
ответ
50
показов
Как сделать чтоб анимация иконки была и у текста
Как сделать чтоб анимация иконки была и у текста,т.е чтоб при наведении на иконку цвет менялся и у текста ( сердечко .heart )
* {
margin: 0;
padding: 0;
font-family: 'Segoe UI', ...
2
голоса
2
ответа
96
показов
Как сделать анимацию вращающегося linear-gradient background?
У меня есть фон с линейным градиентом, и я хочу сделать анимацию на его вращение. Мой код не работает. Чего мне не хватает?
Мне нужно вращать сам градиент, а не элемент. Я хочу сделать анимацию, как ...
0
голосов
2
ответа
40
показов
CSS-анимация с нажатием "Наведи на меня"
Как сделать анимацию с нажатием "Наведи на меня", чтобы вскочила "Подсказочка!" с блоком? Требуется решение БЕЗ JavaScript
.block {
position: absolute;
width: 600px;
...
0
голосов
0
ответов
14
показов
Некорректно работает увеличение картинки на iOS
При открытии картинки, остальные элементы можно скроллить и их видно.
Проблема возникает только на iOS устройствах, на андройде или на windows все замечательно
Сам скрипт ниже
console.log('скрипт ...
2
голоса
1
ответ
41
показ
Не работают stroke-dasharray, stroke-dashoffset
Все привет! Столкнулся с проблемой работы с svg path, ранее использовал для прорисовки линий stroke-dasharray, stroke-dashoffset - и все работало, но здесь что-то пошло не так и эти свойства не ...
0
голосов
0
ответов
73
показа
Почему на разных устройствах анимация работает по-разному в одном браузере?
Ссылка на codepen с полным кодом данного элемента: https://codepen.io/VladimirR04/pen/YzjyxyK
.carr__card {
width: 300px;
height: 200px;
background-color: #442222;
position: absolute;
display: ...
2
голоса
2
ответа
92
показа
Анимация слов на HTML CSS JS
Подскажите пожалуйста как сделать на HTML, CSS, JS так, чтобы курсор "|" когда возвращается налево он заменял слово на другое + на новый "цвет"-"background-color" и ...
0
голосов
1
ответ
61
показ
Как сделать CSS анимацию слайдер
Всем привет!
Вопрос: Есть условный "слайдер" на сайте, все слайды в котором объединены в единый фрейм.
Как с помощью CSS или JS сделать анимацию (чтобы по нажатию на кнопку NEXT к ...
1
голос
1
ответ
134
показа
Анимация подчеркивания при наведения курсора
как сделать так, чтобы до наведения курсора подчеркивание тоже было
пример: www.studiorhe.com
a {
color: black;
position: relative;
cursor: pointer;
}
a:after {
border: none;
content: ""...
0
голосов
0
ответов
37
показов
Необходимо чтобы при ударе кирки, появлялись svg-трещины
Я новичок, и я создаю анимацию, используя svg, в которой кирка ударяет по блоку, и после этого должны появляться трещины, начиная с точки, в которую попала сама кирка, в случайном направлении вниз. Я ...
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;
}
...
0
голосов
1
ответ
123
показа
Почему появляется резкий переход от последнего слайда к первому в Slick Slider?
Столкнулся с проблемой, делаю простой слайдер при помощи Slick Slider и наблюдаю резкий скачек от последнего слайда к первому если ставить режим infinite: true.
$('#slick-slider').slick({
...
0
голосов
1
ответ
104
показа
Как сделать, чтобы opacity у элемента появлялась плавно слева на право?
Есть текст, который появляется при отображении на экране, надо чтобы он появлялся без перемещений, но с плавным opacity от начала блока с текстом до конца.
.showing-text {
position: relative;
...
0
голосов
1
ответ
50
показов
Возможно ли задавать свойстсва других классов в анимации другого?(@keyframes)
К примеру, существует следующая конструкция:
.paragraph_main
{
font-style: italic;
font-weight: 400;
padding-top: 00px;
color: gray;
}
.header_main
{
font-size: 100px;
font-...
0
голосов
0
ответов
30
показов
Как сделать эффект появляющегося движущего блока
Вот пример с Яндекс еды, блок доставки похож на блок шторки уведомлений в вашем смартфоне.
При вызове блока он выезжает снизу, его можно взять сверху и потянуть, блок будет задвигаться обратно, но ...
1
голос
0
ответов
49
показов
Как оформить анимацию при пролистывании страницы?
Имеется анимация отображения текста при пролистывании, так же рядом с текстом расположен пустой div:
.animation-position {
border-right: #d0d0d0 3px solid;
height: 25em;
margin-left: 8rem;
...
0
голосов
0
ответов
71
показ
Рассчитать временные метки относительно анимации на CSS по уравнению Безье
Есть приложение на Vue.js. Стоит задача реализовать колесо рулетки. При нажатии на кнопку, с бека приходит сгенерированное значение (номер сектора). Колесо должно сделать 4 полных оборота и ...
2
голоса
1
ответ
62
показа
Как реализовать анимацию появления кривых линий?
При загрузке страницы , должны появляться линии по направлению точки(левые направо , правые налево), в конце анимации ,на каждой появляется точка.
0
голосов
1
ответ
60
показов
Как плавно убрать задний фон при нажатии?
Сделал смену заднего фона через keyframe с opacity от 0 к 100%, как сделать чтобы при повторном нажатии на кнопку меню цвет не резко переключался на основной, а так же плавно переходил?
@keyframes ...
0
голосов
2
ответа
51
показ
css/html анимации
как сделать блок в который можно поместить ссылки и он с помощью кнопки выдвигался ( с права на лево )?
( по началу его не должно быть видно )
0
голосов
0
ответов
43
показа
Как повесить событие на все элементы при использовании библиотеки GSAP?
Проблема с перебором элементов при использовании библиотеки gsap.
Удается получать все элементы в массив, но не могу внедрить код из библиотеки, в js, чтобы все работало.
На данный момент анимация ...
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" ...
-1
голос
1
ответ
41
показ
Почему не работает свойство hover?
Вот мой код, я хочу сделать подчеркивание при наведении на input.
.form_field_container::after {
content: "";
position: absolute;
bottom: -2px;
height: 2px;
background-...
0
голосов
1
ответ
61
показ
Анимация при загрузки сайта HTML CSS
Подскажите пожалуйста как создать такую же анимацию при загрузки сайта как здесь Hyam. Без надписи, чтобы при открытие сайта анимировнно верхняя часть чёрной полосы уезжала вверх, а нижняя вниз. ...
0
голосов
0
ответов
35
показов
Повторяющийся элемент без JS
Подскажите, возможно ли создать повторяющийся элемент DOM дерева без JS (тоесть он только визуально должен отображаться)? Приведу пример
body {
overflow-x: hidden;
margin: 0;
font-family: ...
0
голосов
4
ответа
48
показов
Как сделать фильтры в виде switcher'а
Подскажите пожалуйста как сделать фильтры в виде switcher'а. Не получается оформить их в css
Мой код:
<style>
.filter-border-design {
border-radius: 55px;
height: 50px;
...