Вопросы с меткой [css-animation]
Анимация элементов html-страницы, основанная на использовании каскадных таблиц стилей (css).
635
вопросов
1
голос
1ответ
38 показов
Z-Index не помогает для кнопок
Хочу поместить псевдоэлемент на уровень ниже, чем сам элемент .button__base или кнопка "связатся с нами", но почему-то не получается.
* {
-webkit-box-sizing: border-box;
box-sizing: ...
2
голоса
1ответ
32 показа
Почему эта анимация маски SVG прерывистая в Firefox, но плавная в Chrome?
Я упростил анимацию SVG, над которой я работаю (которая должна выглядеть как заполнение контейнера), до примера ниже, который работает плавно в Chrome, но прерывисто / заикается в Firefox. Это SVG с ...
1
голос
1ответ
19 показов
Можно добиться чтобы работала в Mozzila Firefox анимация фона с background-clip: text?
Пример на codepen https://codepen.io/fess901/pen/rNWyqbK
В Хроме работает нормально, фон показывается и анимируется внутри текста не выходя за его границы.
В Мозиле просто выставление фона внутри ...
1
голос
1ответ
31 показ
Вращение и перекрытие треугольников css
Я пытаюсь добавить на свой сайт какую-нибудь анимацию.
Вот код моего проекта (используется из этого ответа)
body{
background-color: #312a50;
font-family: Helvetica Neue;
...
5
голосов
2ответа
76 показов
3D-эффект наведения на кнопку
Я пытаюсь воспроизвести этот эффект с помощью чистого CSS:
Пока я пробовал делать:
.parent {
height: 90vh;
width: 100%;
display: flex;
align-items: center;
justify-content: ...
0
голосов
1ответ
38 показов
Управление keyframes через JS
У меня есть анимация, прописанная в CSS:
@keyframes slideIn {
from { width: 0px; }
to { width: 40px; }
}
После того, как я увожу курсор с элемента, должна производиться другая анимация:
@...
3
голоса
2ответа
82 показа
Реально ли сделать такую галерею на чистом CSS?
var sw = document.getElementById("sliderWindow"); // большая картинка
var mi = document.getElementsByClassName("miniImg"); //маленькие картинки
var arrOfImg = [
'https://picsum.photos/id/237/200/...
1
голос
1ответ
28 показов
Как создать анимацию треугольника, используя только CSS
Я хочу создать анимацию, как на рисунке ниже, но использовать при этом только css:
Я построил треугольник, но не могу построить фон из движущихся треугольников, которые будут перемещаться.
Мой код:
...
4
голоса
2ответа
57 показов
Анимация по полукругу
Учусь перемещать div элементы вдоль кривой и для этого нашел хороший пример. Как перемещать между двумя кадрами разобрался, а с тремя сложнее. Не понимаю какой animation-timing-function нужно указать ...
2
голоса
1ответ
30 показов
Анимация для input внутри label
input и label объединены через атрибут for. При выборе, происходит анимация и появляется галка. Нет проблем.
input[type="checkbox"] {
position: absolute;
-webkit-appearance: none;
-moz-...
0
голосов
0ответов
18 показов
Не запускается анимация SCSS
Пытаюсь кастомизировать Swiper слайдер. Мне нужно, чтобы активный bullet из пагинации заполнялся бэкграундом, для эффекта timeline. Типо, как в инстаграме. Но анимация не запускается
SCSS:
:global {
...
1
голос
1ответ
43 показа
Как задать плавную анимацию появления элементов
Подскажите как добавить плавную анимацию для появление элементов после клика. (Те которые справа должны плавно появлятся)
Vue.component("tab-home", {
template: "<div>Home ...
3
голоса
1ответ
44 показа
Как сделать слайд, чтобы при клике все картинки смещались вправо-влево?
Как реализовать таким образом, чтобы при нажатии на L все картинки смещались влево, а при нажатии на R наоборот?
const hamburger_menu = document.querySelector(".hamburger-menu");
const ...
3
голоса
1ответ
64 показа
Как сделать анимированный текст как в Cyberpunk2077?
Мне надо использовать svg или что?
Или что-то на подобие этого
Буду очень благодарен
1
голос
1ответ
42 показа
Как мне сделать path размером 100% на 100% в div
svg{
width: 400px;
height: 100px;
}
#chain_st{
-webkit-animation: dash 1s infinite linear;
-moz-animation: dash 1s infinite linear;
...
3
голоса
0ответов
28 показов
крутящийся граница с помощью html и css
У меня получилось вот такая хрень, в какую сторону сне идть?
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: royalblue;
}...
0
голосов
2ответа
52 показа
Как принудительно активировать стиль для элемента через JS?
Не получается активировать стиль из JS для элемента. Если смотреть в браузере через код элемента, то стиль нормально определяется, но он не активирован т.е. не стоит галочка в стилях
Что за беда? !...
1
голос
1ответ
33 показа
Задать корректную анимацию текста с помощью css
Не получается задать корректную анимацию текста с помощью кейфрейма. Текст анимируется один раз, нужно сделать так, чтобы анимация начиналась с начала, плавно доходила до конца и текст полностью ...
1
голос
1ответ
64 показа
Как можно реализовать подобную анимацию, как в этом макете Figma?
Пока что вообще не имею представления, как это можно реализовать с помощью JS и CSS. Можете дать какие-то наводки или предположения. Вот макет в Figma, где показан пример с функционалом (можно кликать ...
1
голос
1ответ
31 показ
Не получается изменить картинку(кнопку) при наведении на нее курсора в position: fixed
Не получается изменить картинку при наведении на нее курсора. Есть две картинки-кнопки.png надо, чтобы одна заменила другую при наведении на неё мыши.
Важный момент кнопка находится в
position: fixed;...
1
голос
1ответ
53 показа
Как реализовать эффект взрыва изображений в блоке с помощью css анимации?
Есть блок с анимацией, заполняемость которого хочу реализовать с эффектом взрыва изображений цветов: сразу появляются 3 цветка в разных частях блока и под разными углами, затем еще 3 тоже в разных ...
2
голоса
3ответа
80 показов
Адаптивное решение логотипа на СSS без JS
Вопрос исключительно из спортивного интереса
Как решить проблему линий у логотипа без js.
calc() решает только в момент загрузки страницы, и не решает, когда окно меньше контейнера.
https://jsfiddle....
1
голос
1ответ
32 показа
Смена иконки внутри кнопки svg
Имеется кнопка. Необходимо чтобы по нажатию иконка-1 менялась на иконку-2. Если снова нажать на кнопку, то иконка-2 меняется на иконку-1. Не могу понять как это сделать с помощью JS. Возможно это ...
5
голосов
2ответа
56 показов
Передача параметров в css-анимацию
p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
Для ...
1
голос
0ответов
42 показа
Анимация разрушения картинки
Всем привет, никак не могу найти решение подскажите, пожалуйста, кто знает, задача такая есть к примеру картинка и нужно как бы разделить ее на кусочки и что бы они разлетелись в разные стороны, ...
0
голосов
1ответ
25 показов
2 transform для одного объекта
Возможно сделать 2 transform для одного объекта? Делаю анимацию используя transform. Необходимо сделать постоянное вращение, но движение по оси один раз. Первое сделал, а как втрое подключить не знаю. ...
1
голос
1ответ
33 показа
Кнопка с волнами на CSS
Хочется создать кнопку с движущимися волнами. Но из примера ниже видно, что текст перебивается элементами, создающими волны.
Возможно ли с помощью стилей вынести текст кнопки на передний план, оставив ...
0
голосов
0ответов
14 показов
Не работает анимация svg в safari на бою,а на локалке все отлично.в чем может быть проблема?Спасите помогите
Не работает анимация svg в safari на бою,а на локалке все отлично.в чем может быть проблема?Спасите помогите.
Сначала стили были отдельно прописаны,после этого решил записать стили внутрь svg,но к ...
0
голосов
1ответ
77 показов
Выпадающий список открываеться в верх а должен в низ
можете подсказать как сделать чтобы выпадающий список открывался вниз (так как на 2 сайте с видео), он открывается здесь в верх. Сделано ето через js, сначалала при загрузке страницы смотрю какая ...
2
голоса
1ответ
78 показов
Как добиться анимации появления текста CSS на нескольких строках?
Я пытаюсь реализовать анимацию появления текста с помощью CSS. У меня есть текст черного цвета, а затем, когда страница загружается, текст заполняется красным цветом в течение нескольких секунд.
...
1
голос
2ответа
56 показов
Как анимировать прогрессбар?
Есть компонент прогрессБара. Данные для прогресса берутся с базы данных. Использования JS - не желательно.
Задача стоит в том, чтобы сделать анимацию width от 0 до текущего значения(прописан в ...
0
голосов
1ответ
30 показов
Проверить в Vue.js если позиция элемента с анимацией за 100%?
Есть компонент Toy.vue, при анимации falls-toy в top: 100% у меня элемент скрывается за окно браузера. Как отследить, если элемент в позиции top: 100%, то вызвать метод который обработает это? Напишет ...
2
голоса
2ответа
92 показа
Как включить анимацию вращения при клике без js?
мне нужно что бы круг крутился и при клике останавливался и наоборот
вот мой код
HTML
<div class="wrapper">
<svg class="main" xmlns="http://www.w3.org/2000/svg"...
0
голосов
1ответ
18 показов
определенный скролл, анимация при скролле
нужен примерно такой скроллинг как показанно здесь, http://luminouspil.com/#, я использовал инструмент snap-scroll, но не получил то что ожидал, на сайте, который указал выше, при любом размере ...
2
голоса
0ответов
40 показов
zoom-in эффект при прокрутке, эффект нужен для div
Ищу zoom-in эффект при прокрутке, аналог
Эффект в секции з заголовком "REFORM CO".
Может кто-нибудь пояснить как это делается?
Планирую использовать рисунок (SVG маска), чтобы был выден ...
2
голоса
2ответа
68 показов
Как сверстать этот блок?
текст, выделенный жирным шрифтомПодскажите как сверстать такой блок без анимации на CSS?
4
голоса
1ответ
30 показов
Анимация граней на изометрическом кубе CSS
Я пытаюсь анимировать грани изометрического куба, который я создал, используя преобразования CSS, чтобы создать эффект «распаковки / разворачивания».
Я хочу, чтобы крышка куба вращалась вверх, но в ...
3
голоса
2ответа
53 показа
Как добиться корректной работы кнопки пуск эквалайзера?
Я разработал приложение имитирующее работу эквалайзера в части показа изменения аудио частот
Проблемы с анимацией возникают при повторном нажатии на кнопку "Start"
Результаты анимации ...
0
голосов
0ответов
10 показов
Как плавно вернуть элемент в прежнее состояние с использованием jquery
Использовал обычную анимацию в css, срабатывающую при наведении на элемент. Наведение контролировал через .hover() и .toggleClass() в jq. Если вывожу курсор с блока то классы пропадают и элемент резко ...
1
голос
0ответов
21 показ
Анимация элементов css
Подскажите пожалуйста, есть окно.
В ней рандомном расположены 3 элемента.
Как я могу просчитать анимацию, что бы при рандомном top элементы доходили до низа и возвращались в начальное положение (как ...
-1
голос
1ответ
34 показа
Как сделать анимацию линий под текстом?
Вот макет
Вот html
<div class="title_wrapp">
<h3>Intro interview Intro interview Intro interview Intro interview</h3>
</div>
Вот CSS
.title_wrapp h3 {
...
8
голосов
2ответа
109 показов
Как анимировать отскок теннисного мячика
У меня есть изображение теннисного мяча:
Необходимо сделать анимацию падения мячика с последующими отскоками от твердой поверхности.
У меня получилось такого рода анимация, но она выглядит не ...
2
голоса
2ответа
30 показов
Как выполнить анимацию из последнего состояния анимации SVG без использования JavaScript?
Я учусь использовать SVG и / или css clip-path. Я создал, что-то вроде этого:
<svg style="width:300px;height:300px;" viewBox="0 0 100 200">
<text id="bunny" y="50">To Bunny</...
0
голосов
1ответ
27 показов
В чем разница между -webkit-animation-delay и просто animation-delay?
Пытался анимировать кнопку.
Нашел сниппет в котором имеется такой код:
-webkit-animation-delay: 2.75s;
Однако работает и без -webkit-. В чем разница?
3
голоса
1ответ
33 показа
Что не так с анимацией max-height
Почему анимация max-height происходит быстрее, чем другие свойства? Как это решить?
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-...
1
голос
1ответ
118 показов
Как расположить карточки по горизонтали css - html
Нужна помощь, есть 4 карточки , нужно расположить их в ряда по 4 по центру.
Вот мой код (3D flip карты )
.wrap {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display:...
1
голос
1ответ
34 показа
Как анимировать border input'а?
Есть вот такая форма:
Хочу, чтобы при нажатии на input Имя и E-mail плавно появлялись остальные бордеры, но не знаю как реализовать задумку. Сама проблема в том, что где-то видел как бордеры от ...
3
голоса
3ответа
64 показа
SVG Почему не срабатывает CSS анимация stroke-dashoffset
Подскажите почему не срабатывает анимация "растущей линии" stroke-dashoffset ?
.box_success__img {
width: 60px;
}
.svg_success_path1 {
animation: pathAnim1 1s ease-in-out 1000ms ...
4
голоса
1ответ
43 показа
Как ограничить по ширине срабатывание анимации при наведении на изображения?
Есть внутри SVG слой при наведении на который появляется деформированный path с pattern. Так задумано что бы hover работал ТОЛЬКО при наведении на g.path то есть при наведении на другое изображение ...
1
голос
2ответа
44 показа
Скрыть блок с помощью анимации css
Всем привет. Подскажите как сделать, чтобы после анимации блок не появлялся
jsfiddle
setTimeout(function(){
$('.test').addClass('animate');
}, 2000);
.test {
width : 100px;
height: 100px;
...