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

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

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

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

Делаю примитивную анимацию волны. Но столкнулся с проблемой. Первая кривая Безье не согласуется с последующими, из-за этого пришлось спрятать этот участок за холстом. Как можно упростить анимацию, ...
0 голосов
2 ответа
24 показа

Не запускается анимация в сss

Хочу сделать сдвиг квадрата влево, но не пойму, почему не запускается анимация... Помогите, пожалуйста .b{ width: 150px; height: 150px; background-color: rgb(88, 68, 68); animation: 2s ...
2 голоса
2 ответа
441 показ

Обрезать border

Как обрезать border? Совсем не нашёл информации. На изображении пример, обрезать может понадобиться и больше. .round { background: black; border: 6px solid brown; width: 200px; height: ...
5 голосов
3 ответа
479 показов

Как сделать с помощью CSS лоадер, соответствующий размеру контейнера

Хочу использовать следующий индикатор загрузки для контейнеров во время загрузки данных. Проблема в том, что лоадер имеет фиксированную ширину и высоту 300 х 300 пикселей, но я хочу, чтобы он ...
0 голосов
1 ответ
55 показов

3D кнопка, проблема с реализацией border

Как можно реализовать бордер как показан на картинке ниже? Толкового ничего в голову не лезет @import url("https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap"); .button { ...
2 голоса
1 ответ
52 показа

SVG-маска «растекается» по краям холста

У меня есть анимированный svg, который анимирует эффект «gleam/shear». Однако маска не работает на краях поля svg. Я не могу понять, почему он виден по краям. edit - Похоже, это проблема, связанная с ...
1 голос
0 ответов
64 показа

Как position: fixed влияет на CSS свойство transform: rotateY() на устройствах iphone?

На сайте есть карточки с услугами (в них видео проигрывается коротенькое). Если нажать на него то карточка переворачивается и на обратной стороне текст с описанием услуги (переворот осуществляется с ...
4 голоса
3 ответа
6k показов

Тормозит CSS-анимация

Суть вопроса в следующем. На сайте есть sidebar (выезжающее справа меню), анимация которого построена на CSS-transitions. В неактивном состоянии sidebar имеет следующий код: position: fixed; top: 0; ...
0 голосов
1 ответ
135 показов

Анимация псевдоэлементов тега progress

Есть проблема с анимацией у тега <progress>. Мне нужно, чтобы анимация выполнялась только у ::webkit-progress-value. Если я добавляю свойства просто в ::webkit-progress-value, то анимация не ...
2 голоса
1 ответ
769 показов

Анимация полета самолёта с одновременным изменением его размера

На одном из сайтов видел анимацию полёта самолёта с одновременным увеличением, уменьшением размера самолёта во время полёта вдоль трассы движения. Ниже картинки, показывающие изменения размера ...
2 голоса
2 ответа
228 показов

Как сделать анимацию SMIL SVG Колеса обозрения

Как сделать анимацию SMIL SVG Колеса обозрения, основываясь на растровом изображении Я не нашел готового векторного изображения, поэтому нарисовал колесо обозрения в векторном редакторе. Трудность в ...
1 голос
1 ответ
64 показа

Почему css анимация наполнения стакана работает с перебоями

Здесь я просто хочу наполнить чашу пивом. Вот я и подумал, что могу просто изменить фоновое изображение и имитировать процесс наполнения. Но как вы видите, что фон движется вправо или влево, и я не ...
0 голосов
1 ответ
30 показов

Как двигать/копировать объекты слитно?

Как заставить объекты двигаться вместе? вот как тут, у меня тут все отдельно, отдельно, текст, отдельно кнопка, и тд, а как это соеденить? Не могу найти
1 голос
1 ответ
121 показ

Маскирование div с изображением и анимация градиентного фона

В настоящее время я разрабатываю логотип с анимированным градиентным фоном. Требования: Изображение маски должно быть в формате jpg или png. Маскируемый элемент предпочтительно должен быть <div>...
1 голос
0 ответов
95 показов

cursor: url ( Вращение курсора вокруг своей оси)

Я сам дизайнер, и сейчас делаю сайт на конструкторе и могу назначать только стили CSS .custom-cursor-section a { cursor: url('your-custom-cursor-url-path.png'), auto !important; } Не могу ...
3 голоса
1 ответ
3k показов

CSS-анимация с тремя точками на экране загрузки

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

Плавное изменение высоты блока при клике

$(function(){ $(".buttonupdown").click(function(){ $(".droplist").toggleClass('active') $(".buttonicon").toggleClass('active') }); }); .droplist { width: 200px;...
5 голосов
2 ответа
2k показов

Круговой слайдер из 5-и элементов

Как реализовать анимацию кругового слайдера из 5-и элементов, похожего на тот, что на изображении ниже? На сколько градусов правильно повернуть item? Тут ведь не правильный пятиугольник нужен, а ...
3 голоса
3 ответа
169 показов

Как изменть стартовую offset-position?

Анимация svg нужно анимировать несколько элементов, которые двигаються конвеером. Как изменить начальную позицию любого элемента, чтоб он стартовал не с начала пути, а, например, по середине и потом ...
1 голос
1 ответ
260 показов

Анимация вспышки

Делаю анимация открытия сундука, и столкнулся с такой проблемой, что не знаю как сделать вспышку при открытии сундука. Идея такая, когда открывается сундук, идёт небольшая вспышка, которая скрывает то,...
3 голоса
1 ответ
247 показов

Почему не работает stroke-dashoffset в SVG?

Есть один хороший скрипт, который к сожалению, работает только на сайте codepen.io. Я пытаюсь портировать его на SVG. Сначала я делал с помощью <animate> и <animateTransform>. Но что-то не ...
10 голосов
2 ответа
327 показов

Как сделать анимацию полёта дрона над городом

У меня есть анимированное SVG дрона, но вращаются только винты нет перемещения в пространстве. .drone .body { fill: #111111; } .wing { fill:black; transform-origin: ...
0 голосов
2 ответа
1k показов

Проблема с анимацией в safari и остальных браузерах

Есть код, представленный ниже, основная логика: справа на лево перемещается ul с вложенными слайдами li. Проблемы 2: 1 - после завершения анимации, внешний вид возвращается в начальное состояние. 2 ...
1 голос
1 ответ
224 показа

Как осуществить поэтапную задержку зацикленной анимации на чистом css?

Суть проблемы. У меня есть анимация. Бесконечная. Див постепенно, в три этапа, увеличивает свою ширину (на 15%, потом еще на 15%). Увеличение ширины прописаны в @keyframes. Так вот, я хочу поставить ...
1 голос
1 ответ
492 показа

Как заставить работать animation-delay последовательно?

Добрый день, коллеги. У меня вопрос по установке последовательного воспроизведения анимации у блоков САБЖ: Есть несколько дивов, у которых должна ПОСЛЕДОВАТЕЛЬНО, с задержкой работать анимация. ...
2 голоса
1 ответ
42 показа

CSS-анимация работает через класс, но не работает через data-name для родительского элемента

Я графический дизайнер, который хочет научиться программировать :) Мне нужно найти способ вызывать анимацию через data-names. Я обнаружил, что это работает для дочернего элемента, но не работает для ...
0 голосов
1 ответ
752 показа

Почему filter: blur() иногда размывает края в белый цвет, а иногда нет

Вот пример, когда filter не размывает края (края чёрного цвета относительно) .card { width: 365px; height: 425px; margin: 10px; overflow: hidden; position: relative; display: flex; ...
5 голосов
1 ответ
449 показов

Как создать последовательную анимацию SVG появления четырех полосок

Последовательная анимация появления четырех полосок должна соответствовать следующему сценарию: Сценарий анимации: Первая верхняя полоса рисуется слева-направо в течение 4 секунд 2-4 п-п. Точно такая ...
6 голосов
4 ответа
995 показов

SVG Как зациклить анимацию волн

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 1920 150" preserveAspectRatio="none"> <path id="waves" ...
2 голоса
2 ответа
239 показов

Как сделать вращение градиента с белой полосой с помощью CSS по краю элемента

Получилось выполнить вращение градиента средствами SVG с помощью анимации атрибутов x1, x2, y1 y2 <animate attributeName="x1" values="0;0;1;1;0" keyTimes="0;.25;.5;.75;1&...
1 голос
1 ответ
172 показа

CSS 3D анимированное колесо смещено от центра

У меня есть 3D-анимация колеса / цилиндра css, которая вращается по оси x. Моя проблема в том, что анимация движется вверх и вниз за пределами контейнера. Пример GIF ниже ... Код для ...
5 голосов
2 ответа
132 показа

Анимация граней на изометрическом кубе CSS

Я пытаюсь анимировать грани изометрического куба, который я создал, используя преобразования CSS, чтобы создать эффект «распаковки / разворачивания». Я хочу, чтобы крышка куба вращалась вверх, но в ...
0 голосов
2 ответа
112 показов

Как закрашивать текст в элементах перемещающимся цветным блоком?

Есть табы. По умолчанию цвет текста - серый. При переключении нужно чтобы красный цвет плавно заменял серый со смещением. Вот так Под табом должна быть черточка. Думается что все красное должно быть ...
7 голосов
3 ответа
1k показов

Математический маятник, анимация демонстрирующая этот эффект [дубликат]

Математический маятник — осциллятор, представляющий собой механическую систему, состоящую из материальной точки на конце невесомой нерастяжимой нити или лёгкого стержня и находящуюся в однородном поле ...
4 голоса
3 ответа
681 показ

Анимация исчезновения и появления стрелок в SVG

У меня есть SVG, который состоит из 5 стрелок. Я хочу сделать последовательное исчезновение каждой стрелки, снизу вверх для каждой стрелки. Я хочу, чтобы первая стрелка исчезла, затем вторая и т.д. И ...
10 голосов
5 ответов
1k показов

Колыбель Ньютона, анимация демонстрирующая этот эффект

Широко известен физический опыт, названный "Колыбелью Ньютона" см. Wikipedia ref При отклонении и последующем возврате к изначальному положению первого шарика данной системы его энергия и ...
1 голос
2 ответа
103 показа

Багается анимация SVG элемента

У меня есть SVG-картинка биткоина, я ее анимировал так, что она левитирует вверх-вниз, а также у нее подсвечиваются грани голубым светом. Но я заметил проблему, что если на сайте листнуть вниз, ...
4 голоса
3 ответа
962 показа

Анимация по полукругу

Учусь перемещать div элементы вдоль кривой и для этого нашел хороший пример. Как перемещать между двумя кадрами разобрался, а с тремя сложнее. Не понимаю какой animation-timing-function нужно указать ...
1 голос
0 ответов
141 показ

Анимация нижнего navbar

Хочу сделать так, чтобы при нажатии на одну из иконок, под ней образовалась некая полоса, которая будет означать , что человек находится на данной странице (примерно вот так:) А на данный момент, мой ...
3 голоса
1 ответ
36 показов

Сделать неактивными соседние области у кнопки-гамбургера при наведении курсора

Нужно навести только на блок с 3 полосками, для того чтобы выехала панелька. На фото показано синим что нужно убрать, так как при наведении на эти области, панель тоже выезжает. Как решить проблему? ...
4 голоса
4 ответа
2k показов

Как анимировать движение круга по окружности другого большого круга с помощью SVG

Я хочу перемещать маленький круг по окружности большого круга, используя CSS или SVG @keyframes moveAround { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ...
3 голоса
5 ответов
1k показов

Использование css-анимации для перемещения элемента div в каждый угол страницы

Я новичок в сцене анимации css. Я хотел бы узнать, как использовать анимацию css, чтобы элемент div круга переходил в каждый угол страницы. Я пытался сделать это, но безрезультатно, пожалуйста, ...
2 голоса
2 ответа
543 показа

Как анимировать стрелочки на картинке?

Появилась идея сделать анимированные потоки воздуха(стрелки) на сайте с исчезновением в конце. Только не знаю как лучше реализовать. Как вариант думаю нарисовать в Figma стрелку и искажая её сделать ...
1 голос
1 ответ
431 показ

Как задать стили элемента по клику мыши в React?

Используется React const Component = (props) => { return ( <img> ) } Компонент отрисовывает картинку. Как сделать так, чтобы при клике на картинку, она поворачивалась на 180?
2 голоса
1 ответ
30 показов

Повернуть дочерний div перпендикулярно родительскому div в трехмерном пространстве

html { font-size: 0.7rem; } div div { top: 5rem; background-color: #444; transform-origin: top center; } .rotate_x { animation-name: rotate_x; } @keyframes rotate_x { 0% { transform: ...
3 голоса
1 ответ
103 показа

Можно ли в After Effects эталонную диаграмму получить в кривой Безье для CSS?

Прошу прощения если вопрос некорректен, первый раз решаю такую задачу, коллега сделала анимацию в Af Ef, я реализую ее с CSS Animation, понял что каждое действие имеет разный animation-timing-...
2 голоса
2 ответа
175 показов

Реально ли сделать такую галерею на чистом CSS?

var sw = document.getElementById("sliderWindow"); // большая картинка var mi = document.getElementsByClassName("miniImg"); //маленькие картинки var arrOfImg = [ 'https://picsum.photos/id/237/200/...
3 голоса
3 ответа
73 показа

Как анимировано перекрасить div?

Мне нужно из зеленого блока, сделать белый (скрыть), но есть условие, анимация должна идти из правого нижнего угла в левый верхний под углом 45deg
3 голоса
1 ответ
116 показов

Я не могу сделать смайлики анимации css svg похожими на анимацию Pinterest

Я не могу создать CSS-анимацию со своим SVG-спрайтом, похожим на Pinterest. В спрайте 90 кадров, но я не могу заставить его работать. Pinterest анимация Emojis View Pinterest Sprite 90 frames in Svg ...
1 голос
1 ответ
93 показа

Проблема в анимации соседних элементов при hover и keyframes

У меня есть блок, внутри которого есть картинка и описание, которое первоначально скрыто. При наведении на картинку блок должен плавно появится из disblay: none. Я пыталась реализовать это так, но у ...