Вопросы с меткой [keyframes]

Руководство по использованию метки отсутствует.

Фильтрация
Сортировка
Метки
1 голос
1 ответ
71 показ

Что такое в keyframes entry и exit?

В демо демонстрации Chrome нашёл такой код: @supports(animation-timeline: view()) { @keyframes fade-in-on-enter--fade-out-on-exit { entry 0% { opacity: ...
Михаил Камахин's user avatar
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
2 голоса
1 ответ
111 показов

Почему анимация влияет на положение других элементов?

На сайте, сразу под меню, есть блок с анимированными элементами. Именно: несколько изображений циклично сменяют друг друга и поверх них текст, который выезжает слева и справа. Все было ничего, но ...
Vasiliy Markov's user avatar
0 голосов
2 ответа
65 показов

Анимация: бегущий текст внутри контейнера уводит за собой сам контейнер (решено), главное: не добавляется класс анимации и ничего не происходит

Анимация бегущей строки должна начинаться тогда, когда контейнер .stage попадает в поле зрения пользователя. Отслеживатель работает, потому что при попадании блока в поле зрения в консоли выпадает ...
Grebnik's user avatar
1 голос
1 ответ
52 показа

Нужна помощь по простой css анимации

Даю скрин с заданием и с тем на что ума хватило Понимаю, что нужно прописать через ховер + оверфлоу (возможно), но не понимаю как это сделать .out-4-inner { text-align: center; } .out-4-inner:...
Max's user avatar
  • 11
0 голосов
0 ответов
66 показов

Плавная смена слайдов через исчезновение css

Есть стандартная разметка на HTML, CSS. Хотел переделать обычный съезд в сторону на плавное появление и исчезновение. Но код упорно шлёт нах... (JS не предлагать) /* slides */ .slides { width: ...
Gull John's user avatar
0 голосов
1 ответ
34 показа

Как остановить анимацию кейфрейма?

Как остановить анимацию кейфрейма и запустить по нажатию на кнопку? Через animation-play-state: paused;не выходит. Может как-то через js менять продолжительность анимации на 0 секунд? Ещё почему-то ...
nonniks's user avatar
  • 15
0 голосов
0 ответов
26 показов

Как убрать отступы @keyframes

Нужно разместь анимацию в центр экрана, при подключении @keyframes, центральный блок смещается. Почему @keyframes добавляет отступы? margin: 0; padding: 0; } .container{ position: fixed; ...
Borodin Denys's user avatar
0 голосов
1 ответ
62 показа

Плавное скрытие прелодера

На сайте есть прелоадер. Его скрытие запускается через 3 секунды после перехода на страницу. Подскажите, пожалуйста, как сделать это плавно (за 0,5 сек.) в правиле @keyframes ? .preloader { ...
Valentin's user avatar
0 голосов
0 ответов
42 показа

Как закрепить текст в анимируемом блоке

Есть крутящийся блок с текстом,при наведении на который(блок), он останавливается.При повороте блока на 180 градусов, текст внутри него меняет расположение.Как это остановить(закрепить текст на месте)....
doogel's user avatar
  • 3
0 голосов
0 ответов
105 показов

тупит background-position при @keyframes

задал на фоновую картинку через background-image размер 2560 × 1440 px задал движение по горизонтали через @keyframes, изображение дергается, что с этим делать? и еще один момент: у меня бургер меню и ...
Каниф Таймасов's user avatar
1 голос
1 ответ
242 показа

Необходимо создать эффект открытия ноутбука. Еффект открытия - закрытия крышки ноутбука

Есть 2 картинки, основа и крышка ноутбука, нужно создать анимацию открытия - закрытия крышки ноутбука, основа же остаеться неподвижной. Css или js на ваше усмотрение html можете использовать любой, я ...
Roman Vinichenko's user avatar
1 голос
1 ответ
123 показа

Сохранение позиции анимации @keyframes

В чём суть, делаю что-то типо плеера, при нажатии на кнопку play(начать проигрывание), начинает крутиться виниловая пластинка, к ней добавляется класс с анимацией, после повторного нажатия класс, ...
onelevalde's user avatar
0 голосов
1 ответ
46 показов

CSS анимация для backgorund

У меня есть такой код, он не работает @keyframes epilepsy { 0% { background: lime !important; } 10% { background: red !important; } 20% { background: white !important; } ...
Color kat's user avatar
  • 582
3 голоса
1 ответ
178 показов

Что не так с анимацией max-height

Почему анимация max-height происходит быстрее, чем другие свойства? Как это решить? *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: sans-...
Михаил Камахин's user avatar
5 голосов
2 ответа
185 показов

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

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

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

У меня есть блок, который я хочу анимировать таким образом: То есть... Начальное положение; Вверх на 100рх; Вправо на 100рх; Вниз на 100рх; Влево на 100рх – возвращение к начальному положению; ...
Eva's user avatar
  • 1,869
1 голос
1 ответ
678 показов

Как убрать рывки при анимации и сделать ее плавной?

Почему в моему случае анимация элемента происходит "рывками"? Как это исправить? .block { width: 200px; height: 200px; background: yellow; border: 1px dashed black; display: ...
Eva's user avatar
  • 1,869
1 голос
0 ответов
205 показов

Плавное возвращение анимации @keyframes

Недавно столкнулся с проблемой , плавности возвращения анимации "keyframes" , а именно свойства transform. Вроде как удалось решить данную проблему ,но когда попробовал на телефоне плавной ...
HTO HOT's user avatar
  • 1,343
0 голосов
1 ответ
265 показов

Точка начала анимации CSS

Мне необходимо, чтобы на страничке из её центра вырастал шар (фон в виде шара), но у меня он растёт только из левого верхнего угла. Пользовался animation @keyframes
Maks Berd's user avatar
1 голос
1 ответ
197 показов

keyframes не работает в Safari

В Хроме и на локальном сервере в Сафари все работает нормально, но когда выгружаю сайт на хостинг в Сафари анимация появляется кусками и лагает. Отдельно кусок с анимацией: Ссылка на CodePen сейчас ...
ЗюзинPLAY's user avatar
2 голоса
1 ответ
136 показов

Бесконечное вращение изображения в html с интервалом

Здраствуйте, недавно при вёрстке сайта столкнулся с бесконечным вращением картинки с интервалом в 10 секунд, попытался написать код, но у меня не работает animation-delay.(Смысл задания: бесконечный ...
pane's user avatar
  • 89
1 голос
1 ответ
435 показов

Анимация hover out в css для @keyframes

У меня есть кнопка, при наведении на нее появляется box-shadow и он начинает переливаться, но если отвести курсор от кнопки анимация обрывается. Мне нужно чтобы анимация постепенно затухала если ...
Antonio's user avatar
  • 375
0 голосов
1 ответ
101 показ

Почему не срабатывает анимация?

Всем привет. На айфонах при обновлении страницы с очисткой кэша не работает анимация. На других устройствах все работает правильно. В devtools также работает правильно, а вот на айфонах нет. После ...
Марян Витак's user avatar
0 голосов
1 ответ
125 показов

Поворот кнопки с помощью jQuery и CSS

Нужно, чтобы по клику кнопка открывала выпадающее меню и по окончании анимации, поворачивалась на 180 градусов. Также, при повторном клике на неё, меню должно закрыться, а кнопка развернуться обратно. ...
Amphyx's user avatar
  • 229
3 голоса
1 ответ
60 показов

Странное поведение keyframes

Ситуация следующая, когда кубу нужно повернуться по оси Х (с -40deg на 40deg), он почему-то подпрыгивает , при этом в конце анимации я делаю обратное (с 40deg на -40deg) и кубик вращается нормально. ...
Олег's user avatar
2 голоса
0 ответов
43 показа

Анимация с реверсом и паузой

Реализую покадровую анимацию на keyframes. Нужно чтобы при наведении мыши анимация проиграла до конца и остановилась, а при отведении мыши - чтобы анимация проиграла в обратную сторону. При этом если ...
Владимир's user avatar
1 голос
1 ответ
149 показов

keyframes не определяется

@keyframes rot { 0% { background-color: #000 !important; } 100% { background-color: #c0c0c0 !important; } } #telegramSiteHelperChatLabel animation-name rot animation-duration 2s ...
Vyacheslav Potseluyko's user avatar
0 голосов
1 ответ
78 показов

Как задержать анимацию?

Создал такую вёрстку на animation + keyframes но все блоки появляются одновременно и если ставить задержку в сек то собственно это ни чего не решает , хотелось бы что б каждый блок появился после ...
user avatar
0 голосов
2 ответа
66 показов

JS, CSS, HTML5 вопрос по динамическому отслеживанию посетителя

Всем доброго времени суток. Начал я тут обновлять свои познания в css, и вдруг пришла мысль(возможно я где-то это видел), как отследить, например на лендинге, что человек просматривает именно какой-то ...
Kamil NHOT's user avatar
0 голосов
1 ответ
147 показов

Не отображается анимация keyframes. Работает только в Хроме

@-webkit-keyframes slide { 0%, 100% { background-image: url("../img/bg1.jpg"); } 33% { background-image: url("../img/bg2.jpg"); } 66% { background-image: url("../img/bg3.jpg"); } } @-moz-...
Дмитрий Малахов's user avatar
7 голосов
2 ответа
3k показов

При добавлении класса анимация с keyframes работает, а при удалении нет, хотя transition задано

В этом примере все достаточно очевидно и отрабатывает правильно $('div').click(function() { $('div').toggleClass('wide'); }); div { width: 80px; height: 30px; background-color: ...
Georgy Yuriev's user avatar
0 голосов
0 ответов
424 показа

Как выставить слайдеру на @keyframes страницу для показа?

<div id="line"> <img src="1.png" class="simg"> <img src="2.png" class="simg"> <img src="3.png" class="simg"> <img src="4.png" class="simg"> ...
kandi's user avatar
  • 5,109