Вопросы с меткой [keyframes]
Руководство по использованию метки keyframes отсутствует.
33
вопроса
1
голос
1
ответ
71
показ
Что такое в keyframes entry и exit?
В демо демонстрации Chrome нашёл такой код:
@supports(animation-timeline: view()) {
@keyframes fade-in-on-enter--fade-out-on-exit {
entry 0% {
opacity: ...
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));
...
2
голоса
1
ответ
111
показов
Почему анимация влияет на положение других элементов?
На сайте, сразу под меню, есть блок с анимированными элементами. Именно: несколько изображений циклично сменяют друг друга и поверх них текст, который выезжает слева и справа.
Все было ничего, но ...
0
голосов
2
ответа
65
показов
Анимация: бегущий текст внутри контейнера уводит за собой сам контейнер (решено), главное: не добавляется класс анимации и ничего не происходит
Анимация бегущей строки должна начинаться тогда, когда контейнер .stage попадает в поле зрения пользователя. Отслеживатель работает, потому что при попадании блока в поле зрения в консоли выпадает ...
1
голос
1
ответ
52
показа
Нужна помощь по простой css анимации
Даю скрин с заданием и с тем на что ума хватило
Понимаю, что нужно прописать через ховер + оверфлоу (возможно), но не понимаю как это сделать
.out-4-inner {
text-align: center;
}
.out-4-inner:...
0
голосов
0
ответов
66
показов
Плавная смена слайдов через исчезновение css
Есть стандартная разметка на HTML, CSS. Хотел переделать обычный съезд в сторону на плавное появление и исчезновение. Но код упорно шлёт нах... (JS не предлагать)
/* slides */
.slides {
width: ...
0
голосов
1
ответ
34
показа
Как остановить анимацию кейфрейма?
Как остановить анимацию кейфрейма и запустить по нажатию на кнопку? Через animation-play-state: paused;не выходит. Может как-то через js менять продолжительность анимации на 0 секунд?
Ещё почему-то ...
0
голосов
0
ответов
26
показов
Как убрать отступы @keyframes
Нужно разместь анимацию в центр экрана, при подключении @keyframes, центральный блок смещается. Почему @keyframes добавляет отступы?
margin: 0;
padding: 0;
}
.container{
position: fixed;
...
0
голосов
1
ответ
62
показа
Плавное скрытие прелодера
На сайте есть прелоадер. Его скрытие запускается через 3 секунды после перехода на страницу. Подскажите, пожалуйста, как сделать это плавно (за 0,5 сек.) в правиле @keyframes ?
.preloader {
...
0
голосов
0
ответов
42
показа
Как закрепить текст в анимируемом блоке
Есть крутящийся блок с текстом,при наведении на который(блок), он останавливается.При повороте блока на 180 градусов, текст внутри него меняет расположение.Как это остановить(закрепить текст на месте)....
0
голосов
0
ответов
105
показов
тупит background-position при @keyframes
задал на фоновую картинку через background-image размер 2560 × 1440 px
задал движение по горизонтали через @keyframes, изображение дергается, что с этим делать? и еще один момент: у меня бургер меню и ...
1
голос
1
ответ
242
показа
Необходимо создать эффект открытия ноутбука. Еффект открытия - закрытия крышки ноутбука
Есть 2 картинки, основа и крышка ноутбука, нужно создать анимацию открытия - закрытия крышки ноутбука, основа же остаеться неподвижной. Css или js на ваше усмотрение
html можете использовать любой, я ...
1
голос
1
ответ
123
показа
Сохранение позиции анимации @keyframes
В чём суть, делаю что-то типо плеера, при нажатии на кнопку play(начать проигрывание), начинает крутиться виниловая пластинка, к ней добавляется класс с анимацией, после повторного нажатия класс, ...
0
голосов
1
ответ
46
показов
CSS анимация для backgorund
У меня есть такой код, он не работает
@keyframes epilepsy {
0% {
background: lime !important;
}
10% {
background: red !important;
}
20% {
background: white !important;
}
...
3
голоса
1
ответ
178
показов
Что не так с анимацией max-height
Почему анимация max-height происходит быстрее, чем другие свойства? Как это решить?
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-...
5
голосов
2
ответа
185
показов
Что означает 100% в @keyframes?
Вопрос такой: что значит,если в @keyframes указываются только 100%(эквивалентно to) или только 0%
(эквивалентно from).
Например:
@keyframes spin_1 {100% { transform: rotate(360deg); }}
@keyframes ...
3
голоса
2
ответа
338
показов
Как сделать непрерывную анимацию по квадратному пути?
У меня есть блок, который я хочу анимировать таким образом:
То есть...
Начальное положение;
Вверх на 100рх;
Вправо на 100рх;
Вниз на 100рх;
Влево на 100рх – возвращение к начальному положению;
...
1
голос
1
ответ
678
показов
Как убрать рывки при анимации и сделать ее плавной?
Почему в моему случае анимация элемента происходит "рывками"? Как это исправить?
.block {
width: 200px;
height: 200px;
background: yellow;
border: 1px dashed black;
display: ...
1
голос
0
ответов
205
показов
Плавное возвращение анимации @keyframes
Недавно столкнулся с проблемой , плавности возвращения анимации "keyframes" , а именно свойства transform. Вроде как удалось решить данную проблему ,но когда попробовал на телефоне плавной ...
0
голосов
1
ответ
265
показов
Точка начала анимации CSS
Мне необходимо, чтобы на страничке из её центра вырастал шар (фон в виде шара), но у меня он растёт только из левого верхнего угла.
Пользовался animation @keyframes
1
голос
1
ответ
197
показов
keyframes не работает в Safari
В Хроме и на локальном сервере в Сафари все работает нормально, но когда выгружаю сайт на хостинг в Сафари анимация появляется кусками и лагает.
Отдельно кусок с анимацией:
Ссылка на CodePen
сейчас ...
2
голоса
1
ответ
136
показов
Бесконечное вращение изображения в html с интервалом
Здраствуйте, недавно при вёрстке сайта столкнулся с бесконечным вращением картинки с интервалом в 10 секунд, попытался написать код, но у меня не работает animation-delay.(Смысл задания: бесконечный ...
1
голос
1
ответ
435
показов
Анимация hover out в css для @keyframes
У меня есть кнопка, при наведении на нее появляется box-shadow и он начинает переливаться, но если отвести курсор от кнопки анимация обрывается.
Мне нужно чтобы анимация постепенно затухала если ...
0
голосов
1
ответ
101
показ
Почему не срабатывает анимация?
Всем привет. На айфонах при обновлении страницы с очисткой кэша не работает анимация. На других устройствах все работает правильно. В devtools также работает правильно, а вот на айфонах нет. После ...
0
голосов
1
ответ
125
показов
Поворот кнопки с помощью jQuery и CSS
Нужно, чтобы по клику кнопка открывала выпадающее меню и по окончании анимации, поворачивалась на 180 градусов. Также, при повторном клике на неё, меню должно закрыться, а кнопка развернуться обратно. ...
3
голоса
1
ответ
60
показов
Странное поведение keyframes
Ситуация следующая, когда кубу нужно повернуться по оси Х (с -40deg на 40deg), он почему-то подпрыгивает , при этом в конце анимации я делаю обратное (с 40deg на -40deg) и кубик вращается нормально. ...
2
голоса
0
ответов
43
показа
Анимация с реверсом и паузой
Реализую покадровую анимацию на keyframes. Нужно чтобы при наведении мыши анимация проиграла до конца и остановилась, а при отведении мыши - чтобы анимация проиграла в обратную сторону. При этом если ...
1
голос
1
ответ
149
показов
keyframes не определяется
@keyframes rot {
0% {
background-color: #000 !important;
}
100% {
background-color: #c0c0c0 !important;
}
}
#telegramSiteHelperChatLabel
animation-name rot
animation-duration 2s
...
0
голосов
1
ответ
78
показов
Как задержать анимацию?
Создал такую вёрстку на animation + keyframes но все блоки появляются одновременно и если ставить задержку в сек то собственно это ни чего не решает , хотелось бы что б каждый блок появился после ...
0
голосов
2
ответа
66
показов
JS, CSS, HTML5 вопрос по динамическому отслеживанию посетителя
Всем доброго времени суток. Начал я тут обновлять свои познания в css, и вдруг пришла мысль(возможно я где-то это видел), как отследить, например на лендинге, что человек просматривает именно какой-то ...
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-...
7
голосов
2
ответа
3k
показов
При добавлении класса анимация с keyframes работает, а при удалении нет, хотя transition задано
В этом примере все достаточно очевидно и отрабатывает правильно
$('div').click(function() {
$('div').toggleClass('wide');
});
div {
width: 80px;
height: 30px;
background-color: ...
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">
...