Вопросы с меткой [анимация]

Анимация - это быстрое отображение последовательности изображений для того, чтобы создать иллюзию движения или изменения. Используйте данную метку вопросов по программной работе с анимацией, в сочетании с меткой используемой графической технологии и языка программирования. Для вопросов по анимации в CSS есть отдельная метка [css-animation]

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

Анимация "конверт"

Как сделать подобное на jQuery/JavaScript/CSS Есть ромб, разделенный условно на четыре части и при наведении на него мышкой эти четыре части раскрываются в квадрат, т.е весь ромб превращается в ...
Andrew's user avatar
  • 365
6 голосов
2 ответа
1k показов

Выполнение анимации SVG вдоль пути (анимация скрипичного ключа)

У меня есть SVG-файл, который представляет собой плоскую фигуру. Я хотел бы создать анимацию, чтобы фигура постепенно прорисовывалась. Такой пример анимации, как с логотипом «S» от бренда Samsung ...
Alexandr_TT's user avatar
6 голосов
1 ответ
431 показ

Как данный пример анимации CSS сделать на чистом SVG SMIL

Как данный пример полностью реализовать на svg, без единой строчки css. css можно стилизовать только сам тег svg *, * ::after, *::before { margin: 0; padding: 0; } html, body { ...
Air's user avatar
  • 14.6k
6 голосов
1 ответ
183 показа

svg mask для лоадера

Есть такой интересный лоадер: Как я понимаю, должна быть картинка, svg лоадер, маска. Принцип как тут - пример (использование mask). Пока есть набросок: html, body { margin: 0; padding: ...
SVE's user avatar
  • 22.4k
6 голосов
1 ответ
125 показов

Можно ли добиться такого же эффекта?

Появился вопрос не по теме SVG => Как анимировать последовательно UIBezier линии Разумеется что это можно реализовать на smil Вот что я сделал <svg viewBox="0 0 500 150" xmlns="http://www.w3....
Резидент Казахстана's user avatar
6 голосов
1 ответ
467 показов

Как реализовать анимацию по клику SVG фигур в EDGE и IE?

Данный вопрос уже можно сказать не актуален Microsoft Edge-Chromium Insider Чтобы не возникало лишних вопросов, и не было предложений, которые не решают вопроса. Изменил примеры на ...
Air's user avatar
  • 14.6k
6 голосов
1 ответ
1k показов

Анимация появления фрагмента

Я хочу анимировать появление фрагмента. При чем чтобы он появлялся "сверху вниз". Мне частично удалось реализовать задумку, но проблема в том что сначала появляется место на экране под фрагмент, а ...
Евгений Васильев's user avatar
5 голосов
3 ответа
2k показов

Сделать анимацию стрелы при наведении и анимацию ссылки (удлинение)

Всем привет. Помогите пожалуйста сделать анимацию стрелы при наведении, как на Gif и анимацию ссылки. SVG и GIF прилагаются. Пробовал добавить под стрелку "палку" чтобы просто смещать ...
Alexandr's user avatar
  • 573
5 голосов
2 ответа
1k показов

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

Как реализовать анимацию, чтобы кружок плавно нарисовал линию по окружности и затем остановился?
Александр Krassnow's user avatar
5 голосов
4 ответа
242 показа

CSS - Можно ли анимировать clip на изображении, чтобы открывать квадранты по часовой стрелке?

У меня есть два круглых изображения. Верхнее изображение располагается абсолютно поверх нижнего изображения. Я показываю верхнее изображение с интервалом 25% с помощью клипа, и мне интересно, можно ли ...
Alexandr_TT's user avatar
5 голосов
2 ответа
173 показа

Эффект частичного складывания изображения при наведении

Даже и не знаю, как это охарактеризовать, но вот что нужно сделать при наведении на изображение: Реально ли такое сделать?
user avatar
5 голосов
3 ответа
659 показов

Как с помощью синуса построить траекторию полёта птицы?

График траектории должен принимать разную амплитуду. Это схематический полёт птицы в игре. Птица летит слева направо, график её полёта просто похож на синус, но нужно как-то менять амплитуду и длину ...
Serge Esmanovich's user avatar
5 голосов
3 ответа
5k показов

Анимация появления текста в TextView

Мне нужно, чтобы по нажатию на кнопку появлялся текст как бы размытый и потом примерно за две секунды становился чётким. Как это можно сделать? Или же чтобы при нажатии на кнопку текст постепенно ...
Belial's user avatar
  • 553
5 голосов
2 ответа
13k показов

Вращение или поворот изображения при наведении

Я хочу узнать, как сделать вращающееся изображение, когда на него наводится курсор. Хотелось бы понять, как реализовать эту функциональность с помощью CSS и следующего кода: img { border-radius:...
Alexandr_TT's user avatar
5 голосов
2 ответа
2k показов

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

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

Как сделать кнопку, которая анимируется при наведении, как кнопка, найденная на Airforce.com

Как сделать, чтобы кнопка анимировалась при наведении курсора точно так же, как кнопки в этом GIF или на airforce.com.
Alexandr_TT's user avatar
5 голосов
2 ответа
697 показов

Заливка объекта снизу-вверх

Как на SVG создать круглый бордюр с заливкой от низа к верху. Ниже, как это реализовано с помощью CSS: $('input[type="range"]').bind('change mousemove',function(){ $('.border-bg').height($(...
De.Minov's user avatar
  • 24.1k
5 голосов
2 ответа
917 показов

Как сделать анимацию падающей капли воды?

Я хочу реализовать анимацию падающей капли воды. Капля имеет вначале круглую форму, затем постепенно вытягивается вниз до момента отрыва от поверхности и падает вниз. У меня получилось сделать ...
Alexandr_TT's user avatar
5 голосов
2 ответа
1k показов

Как сделать несколько последовательных анимаций в svg

Я хочу получить некую анимацию только на SVG таким образом : Буква Х трансформируется в чёрный квадрат и потом этот квадрат становится белым и должна появится слово по центру этого квадрата как при ...
Резидент Казахстана's user avatar
5 голосов
2 ответа
246 показов

Как заанимировать эквалайзер

Есть задача заанимировать такой эквалайзер https://prnt.sc/vki1ks. Он должен просто попрыгать в течении некоторого времени и превратиться в линию (без музыки). Пробовал сделать в canvas с помощью ...
Verkt's user avatar
  • 51
5 голосов
3 ответа
338 показов

Как сделать анимацию стрелки, прямоугольника svg

https://cpeople.ru/portfolio/ в портфолио есть иконка svg, при наведении на которую анимируется стрелка вместе с прямоугольником. Как такое реализовать? <svg xmlns="http://www.w3.org/2000/...
Элвин's user avatar
5 голосов
3 ответа
358 показов

svg clip-path для блока на весь экран с пропорциями

Пытаюсь использовать svg clip-path для картинки: * { box-sizing:border-box; } html, body { padding: 0; margin: 0; width: 100%; height: 100%; } .box { width: 100%; ...
SVE's user avatar
  • 22.4k
5 голосов
2 ответа
337 показов

SVG: border outline для группы элементов

Я хотел бы добавить границу для элементов, которые сгруппированы. В качестве примера: <g id="group"> <circle cx="125" cy="125" r="65" fill="orange" /> <line x1="50" y1="50" x2="...
Alexandr_TT's user avatar
5 голосов
1 ответ
1k показов

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

В анимации круг заполняется полностью обводкой и меняются проценты. На определенных процентах нужно сменять запись"Анализ индекса массы тела" Чем удобнее всего такое реализовать? Может ...
Danil Gallyamshin's user avatar
5 голосов
2 ответа
2k показов

Как добавить ссылку внутри круга SVG

Я нарисовал круг, используя svg. Этот круг имеет эффект :hover. Я хотел бы добавить ссылку внутри круга и для текста ссылки изменить цвет при наведении курсора. Ниже мой код: svg#circle { height:...
Alexandr_TT's user avatar
5 голосов
1 ответ
223 показа

Сделать анимированный SVG фон из квадратов

Необходимо написать скрипт, который создаёт фон из квадратов похожих цветов, со случайным поворотом. Анимировать фон так, чтобы при движении мыши те квадраты, на которые наводится мышь становились ...
Дмитрий Полянин's user avatar
5 голосов
2 ответа
305 показов

Граница исчезает по кругу

Как сделать последнюю часть вращающегося круга постепенно исчезающей? #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: ...
Alexandr_TT's user avatar
5 голосов
2 ответа
545 показов

Перезапуск SVG анимации через удаление animateTransform

Всем привет. Возникла проблема с svg анимацией. Мне нужно чтобы js останавливал анимацию круга ( для этого я удаляю тег <animateTransform>), а затем возобновлял ее ( возвращаю тег обратно), и ...
Daniil Dubchenko's user avatar
5 голосов
1 ответ
590 показов

Масштабируемая сетка из шестигранников

Я загрузил из Интернета несколько изображений на мой сайт . Можно ли придать всем этим образам шестигранную форму в responsive grid? <div> <img src="link" class="Image"> </...
Alexandr_TT's user avatar
5 голосов
1 ответ
298 показов

3D зеркальное отображение карт

Я пытаюсь сделать эффект зеркального отображения 3D-карты с помощью CSS, как на примере ниже. Разница заключается в том, что я хочу использовать чистый CSS для реализации эффекта. ...
Alexandr_TT's user avatar
5 голосов
1 ответ
275 показов

SVG плюс CSS анимация

Я хочу сделать анимацию волны, которая превращается в прямую линию. То, что есть сейчас, это анимация волны, идущей слева направо, см. ниже код. Также это может быть сделано только с помощью CSS? ...
Alexandr_TT's user avatar
5 голосов
2 ответа
323 показа

Анимация svg в Firefox

По непонятной причине не работает анимация в Firefox: http://codepen.io/SelenIT/pen/mHpDG/ <svg width="500" height="350"> <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />...
nup's user avatar
  • 1,833
5 голосов
1 ответ
913 показов

Не работает анимация границ при изменении ширины и высоты блока

Пожалуйста, помогите в коде с анимацией границ. Меняю исходную ширину и высоту блока, в результате анимация верхней и левой границы блока работает, а вот внизу и справа нет. Как не менял параметры ...
kolyanya's user avatar
5 голосов
2 ответа
182 показа

Анимация элементов SVG при горизонтальной прокрутке

const slides = document.querySelectorAll('.rect'); slides.forEach((i) => { if (i) { const observer = new IntersectionObserver((entries) => { observerCallback(entries, observer, i) ...
Александр's user avatar
5 голосов
2 ответа
200 показов

Что означает 100% в @keyframes?

Вопрос такой: что значит,если в @keyframes указываются только 100%(эквивалентно to) или только 0% (эквивалентно from). Например: @keyframes spin_1 {100% { transform: rotate(360deg); }} @keyframes ...
Eva's user avatar
  • 1,889
5 голосов
2 ответа
385 показов

Как запретить проигрывать вторую анимацию, пока не закончилась первая и наоборот? JS

При нажатии на кнопку выезжает div, если нажать на эту кнопку два или больше раз div начинает дергаться вправо и влево: 'use strict'; let button = document.querySelector('button'), anBox = ...
Dmitry Arbuzikov's user avatar
5 голосов
1 ответ
277 показов

Как анимировать растровую картинку внутри SVG

У меня есть несколько растровых изображений в формате *.png Одно изображение я хочу использовать как фон Другие растровые изображения хочу использовать, как персонажи анимации Например заяц с ...
Alexandr_TT's user avatar
5 голосов
1 ответ
205 показов

Какими способами можно решить проблему с шириной строк?

Прошу Ваших советов в реализации данной задачи. Я реализовал анимацию с помощью svg, но тут-то и возникла проблема с шириной строк. svg { width: 315px; height: 44px; top: 0; left: 0; ...
Bohdan's user avatar
  • 61
5 голосов
1 ответ
239 показов

Как сделать анимацию SVG текста вокруг многоугольника

Допустим необходимо равномерно разместить текст вокруг многоугольника, таким образом, чтобы вне зависимости от длины слов и их количества, а также размера шрифта,- вся фраза размещалась вдоль сторон ...
Alexandr_TT's user avatar
5 голосов
2 ответа
396 показов

Как при наведении на изображение подчеркнуть текст?

Пример один: .blog-img-main img { transition: 1s; display: block; width: 20rem; } .blog-img-main img:hover { transform: scale(1.02); } .blog-img-main { -webkit-transition: all 1s ease; ...
Aleksus's user avatar
  • 119
5 голосов
1 ответ
624 показа

Как анимировать рукописный текст на веб-странице с помощью SVG

Я пытаюсь анимировать текст, который я создал и сохранил как SVG. До сих пор мне удавалось только оживить stroke, но это не то, что я хочу получить. Вот ссылка на пример, что мне нужно: ...
Alexandr_TT's user avatar
5 голосов
1 ответ
448 показов

Поиск ошибок в приложениях SVG

На практике очень часто случается, что приложение SVG должно работать, фрагменты кода, как и в других работающих приложениях точно такие же, но любые попытки найти ошибку, заставить работать новое ...
Alexandr_TT's user avatar
5 голосов
2 ответа
164 показа

Изменение цвета фона страницы сайта и его элементов

Хочу реализовать такую анимацию. Снизу страницы поднимается вода, которая меняет цвет фона страницы и цвет ее элементов. По мере того, как вода заполняет страницу, она как бы окрашивает ее элементы (...
Александр Курмояров's user avatar
5 голосов
1 ответ
827 показов

Как зациклить анимацию (setInterval)

Пишу себе велосипед, кубик должен бесконечно двигаться вправо и возвращаться. Происходит только 1 итерация.Если добавить в left_go() в else if{ setInterval(right_go, 5);} , все работает, но со ...
Владимир's user avatar
5 голосов
2 ответа
509 показов

Наложение прозрачной текстовой маски на анимированный прогресс-бар (SVG)

У меня такая проблема, что не удается совместить прозрачную текстовую маску и прогресс-бар: получается либо статичная прозрачная маска либо аниминированный прогресс-бар без надписи. Необходимо ...
Riccu's user avatar
  • 329
5 голосов
1 ответ
215 показов

Как получить анимацию svg объекта, который связан через js с другим svg объектом, задавая анимацию только второму?

Имеется две линии. Правый конец черной line1 можно передвигать мышкой. При этом координаты конца зеленой линии line2 зависят от line1 через функцию moveline2. Далее добавил анимацию первой линии по ...
andrey.ilinskiy's user avatar
5 голосов
1 ответ
5k показов

Анимированный слайд-переход между activity

Хочу добавить анимированный переход между несколькими активити. Требуется при нажатии кнопки осуществить смену одного экрана (активити) другим по типу слайда, как тут: http://developer.android.com/...
Atrovent's user avatar
  • 131
5 голосов
2 ответа
222 показа

Реализация логики срабатывания двух условий в анимации

Вопрос инициирован вопросом и ответом на него, в котором реализована логика взаимодействия пешеходов с сигналами светофора: Пешеходы: стоят у зебры, когда: горит желтый или красный свет переходят ...
Alexandr_TT's user avatar
5 голосов
2 ответа
572 показа

Анимация JQuery. Как вернуть квадрат обратно?

Как при втором нажатии на кнопку вернуть квадрат обратно? Код ниже. <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery....
Кирилл Кириллов's user avatar
5 голосов
2 ответа
1k показов

Анимация волны (wave) svg по атрибуту d path

У меня есть следующий эффект, сделанный с помощью svg анимации. Код svg + путь анимации из исходников: Волна идет снизу. Моя задача разместить ее сверху. И вроде все хорошо, с помощью illustrator ...
Artyom Sosonko's user avatar