Вопросы с меткой [css-animation]
Анимация элементов html-страницы, основанная на использовании каскадных таблиц стилей (css).
758
вопросов
0
голосов
0
ответов
20
показов
Как задать время для каждого push уведомление?
Столкнулся с проблемой , что когда я вывел уже одно уведомление с длительностью допустим 20 секунд , а затем вызываю другое уведомление с длительностью 10 секунд эти 10 секунд применяются к первому ...
0
голосов
1
ответ
26
показов
Помощь с css анимацией
пожалуйста, обьясните, почему моя анимация дергается? по сути то она должна плавно меняться.
radial-gradient в свойстве background должен равномерно перемещаться по странице, у меня же он перемещается ...
0
голосов
0
ответов
49
показов
"Верстальщик с опытом" Кто поможет в получении ответа на критику?
День добрый!
Есть задача (видео) - работодателя.
Есть репозиторий с версткой (с анимацией) - в ответ работодателю.
Есть сопроводительное письмо (от меня) в котором говориться, что работа сделана не до ...
0
голосов
1
ответ
31
показ
Подскажите как выровнять елементы в header?
У меня не работают стили для .header, и не могу понять откуда появился лишний отступ в навигации
html,
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #555;
font-size: 16px;
...
0
голосов
1
ответ
30
показов
Как реализовать тряску элементов без css и jquey ui?
window.onload = load;
let N = 10;
let K = 0;
let play = true;
function load() {
var stop = document.getElementById("stop");
stop.onclick = RectStop;
var start = document.getElementById("...
-1
голос
1
ответ
32
показа
Анимация css, js
Можно как-то воссоздать такую же анимацию иконок снизу (telegram) как на этом сайте - https://rocketboys.io/?
0
голосов
1
ответ
19
показов
Текст выводиться за блок
Не пойму из-за чего текст вылазит за блок ?
@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900);
.first-item {
display: flex;
align-items: ...
0
голосов
1
ответ
15
показов
Плавное скрытие прелодера
На сайте есть прелоадер. Его скрытие запускается через 3 секунды после перехода на страницу. Подскажите, пожалуйста, как сделать это плавно (за 0,5 сек.) в правиле @keyframes ?
.preloader {
...
0
голосов
1
ответ
41
показ
Как сделать плавным раскрытие вертикального многоуровневого меню?
Есть вертикальное меню-каталог с неограниченным уровнем вложенности. Я столкнулся с проблемой - не могу анимировать его раскрытие и закрытие. Свойство display не анимируется, height тоже. Есть ещё ...
0
голосов
1
ответ
26
показов
На одностаничнике сделать свап с перекидыванием кнопки управления?
У меня есть концепция сайта и я не могу придумать в силу не опытности как её реализовать.
Задача в том, чтобы на сайте было 2 секции.
1я - с которой сайт стартует.
2я - при нажатии на кнопку в углу, ...
0
голосов
0
ответов
32
показа
Неккоректная работа спиннера в Safari
Создав спиннер при помощи анимации, проверил в браузерах Chrome/Firefox, все работает. Проверяю в Safari, анимация ведет себя по-другому. Прокручивается, но там, когда line идет по кругу, отображается ...
0
голосов
0
ответов
16
показов
Как изменять скорость transition css или scss в зависимости от ширены элемента?
Чем больше элемент тем медленнее анимация. Я использую React и scss. Варианты были разные функция calc(), transition-timing-function, даже через React пробовал. Если описывать проблему подробней то ...
0
голосов
1
ответ
34
показа
Как сделать задержку анимации?
У меня есть анимация на css. Проект пишу на реакте. Мне нужно сделать задержку анимации т.е. чтобы блок всплывал, держался какое-то время на экране,например 10 секунд и потом плавно уплывал вниз. ...
1
голос
1
ответ
142
показа
Сохранить анимацию css
function eCr(Type, atr = {}){
let element = document.createElement(Type);
for (var idx in atr)
idx == 'html' ? (element.innerHTML = atr[idx]) : (idx == 'append' || idx == 'before' ? ...
0
голосов
1
ответ
29
показов
Помогите выразить член из формулы
коллеги!
Есть такая вот формула расчёта скорости анимации
let tempValue = 10 ** (2 - value / maxValue * 3);
Почти прекрасно работает.
Но мне нужно теперь отсюда выразить value. Пожалуйста подскажите.
2
голоса
1
ответ
25
показов
Не выполнять анимацию когда пользователь открывает страницу
c.onclick = e => document.querySelector('.setti').classList.toggle('ani');
svg { width: 100px }
path {transform-origin: 18px 18px; animation: cog1 100ms forwards linear}
.ani path {animation: cog ...
2
голоса
2
ответа
78
показов
Выполнить анимацию вращения шестеренки svg
<script>
c.onclick = e => document.querySelector('svg').classList.toggle('ani');
</script>
.ani path{
transform-origin: 19px 19px;
transform: rotateZ(30deg);
}
svg { ...
0
голосов
0
ответов
33
показа
Как реализовать анимацию закрытия бургер меню?
Я хочу сделать так чтобы при нажатии на иконку бургер меню блок меню плавно выезжал слева (это у меня получилось наотлично) но я не могу понять как сделать так чтобы блок обратно заезжал после нажатия....
0
голосов
1
ответ
54
показа
Появление анимации при наведении на блок
Я нович в html/css так, что прошу не судить строго. Я написал код в css. При котором при наведении на контейнер, должна проигрываться анимация. но проблема в том что одна часть анимации(то есть ...
1
голос
1
ответ
49
показов
Изменять скорость анимации при помощи ползунка
коллеги!
Передо мной стоит задача изменять скорость анимации при помощи ползунка и прикрученному к нему событию. В html это выглядит вот так:
<input type="range" min="0" max=&...
-1
голос
1
ответ
24
показа
Не удается добиться оптимальной анимации
.sst {
display:flex;
align-items: center;
gap:15px;
height: 0;
overflow: hidden;
transition: 3s all ease-in-out;
}
.open .sst {
animation: opp .3s ease-in-out 1 normal forwards
}
@...
0
голосов
0
ответов
17
показов
Как закрепить текст в анимируемом блоке
Есть крутящийся блок с текстом,при наведении на который(блок), он останавливается.При повороте блока на 180 градусов, текст внутри него меняет расположение.Как это остановить(закрепить текст на месте)....
1
голос
1
ответ
40
показов
Реализация эффекта постепенного уменьшения, после выделенной области
как я могу сделать такой ховер эффект: при наведений она дожна станавится больше и все остыльные по очередности меньше
0
голосов
1
ответ
19
показов
Не срабатывает toggleClass jQuery
Недавно начал изучать jQuery. Пытаюсь сделать выезжающее меню слева. Не срабатывает toggleClass. Помогите пожалуйста
HTML:
<div class="menu">
<a href="" class=&...
2
голоса
1
ответ
85
показов
Движение автомобиля
Я только начал учиться, сильно не пинайте.
А как сделать чтобы авто останавливалось не по центру, а ближе к левому краю?
Код взят из темы: "Как анимировать колеса картинки автомобиля в формате ...
0
голосов
0
ответов
29
показов
Моментальное изменение параметров в css анимации
Есть анимация
@keyframes slidein {
0% {
width: 100%;
}
50% {
width: 0
}
100% {
width:0;
}
}
И я хочу, например, после 50% моментально применить width: 100% и ещё пару ...
0
голосов
1
ответ
37
показов
Как обеденять css объекты
<style>
.ball {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: orange;
transform-origin: center top;
}
.test {
height: 400px;
width: 3px;
background-color: ...
2
голоса
2
ответа
71
показ
Необходимо осуществить анимацию кнопки при нажатии
Столкнулся с проблемой анимации кнопки.
Мне необходимо сделать чтобы при клике кнопка меняла цвет, при повторном нажатии меняла на дефолт. Что-бы было понятнее, это кнопка "добавить товар в ...
0
голосов
1
ответ
28
показов
Движение блока вдоль границ страницы
Есть блок, которому я задал анимацию. Нужно адаптировать анимацию блока под разные разрешения устройства. Пробовал задавать top, left в % - не помогает.
body {
width: 100%;
min-height: 100%;
}
...
1
голос
2
ответа
58
показов
Передача значения из JS в css
Это анимация маятника, довольно кривая, но всё же. Надо, чтобы можно было регулировать длину нити маятника, и следовательно, его период колебания. Но пока ничего не получается. Или, если у вас на ...
2
голоса
1
ответ
41
показ
Можете обьяснить пожалуйста как работает этот код Css анимаци
Немного понимаю но все таки сложновато понять как работает код
Спасибо большое кто обьяснит.
.headtext:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
...
1
голос
1
ответ
18
показов
Анимация нижнего подчеркивания криво работает
Анимация нижнего подчеркивания работает криво она на всю страницу подчеркивает
Спасибо большое кто поможет
.headtext:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
...
0
голосов
1
ответ
21
показ
Подскажите, пожалуйста, почему используя transform-style: preserve-3d; в примере есть мигание и как от него избавиться?
Подскажите, пожалуйста, почему используя transform-style: preserve-3d; в примере есть мигание и как от него избавиться? <https://codepen.io/html5book/pen/bOLzVq >
0
голосов
1
ответ
30
показов
Почему часть блока убегает на другую сторону? (css)
.greed-wrapper {
columns: 2;
column-gap: 0px;
display: inline-block;
}
<div class="row greed-wrapper">
<div class="wrapper-menu-category"></div>
&...
0
голосов
0
ответов
28
показов
тупит background-position при @keyframes
задал на фоновую картинку через background-image размер 2560 × 1440 px
задал движение по горизонтали через @keyframes, изображение дергается, что с этим делать? и еще один момент: у меня бургер меню и ...
0
голосов
0
ответов
42
показа
Подскажите как мигрировать с Vue3 на Vue2
Хотел спросить как изменить код с Vue3 на Vue2 и сохранить его работоспособность.
const appData = {
setup() {
const circles = Vue.ref([{
id: 0,
x: 50,
y: 50,
d: ...
2
голоса
2
ответа
87
показов
Как сделать похожую анимацию?
Я пытаюсь сделать анимацию, где звёзды бесконечно двигаются с низу в верх.
Звёзды первый раз доходят до верха и появляются в том же месте, где и появились в самом начале, а мне нужно, чтобы после ...
2
голоса
2
ответа
112
показов
Анимация поворота уже трансформированного элемента средствами CSS и JS
На простенькой html-страничке я кнопками вращаю изображение. Если изображение вращать только кнопками "повернуть по часовой" и "повернуть против часовой", то изображение вращается ...
0
голосов
0
ответов
34
показа
Как в angular сделать анимацию при скролле до определённого элемента?
Как можно на ангуляре без костылей проиграть анимацию при скролле к элементу?
Как это будет срабатывать - многократно каждый раз, если вернуться опять или один раз?
Какое будет поведение, если ...
2
голоса
1
ответ
53
показа
Как запустить одну анимацию за другой?
* {
margin: 0;
padding: 0;
}
.h {
animation: anim1 400ms linear 1 forwards;
margin-left: -500px;
}
@keyframes anim1 {
from {
margin-left: -500px;
}
to {
margin-left: 0px;
}
}
...
2
голоса
1
ответ
43
показа
Как развернуть анимацию зеркально
Как развернуть анимацию, когда объект дошёл до конца страницы?
div {
animation: MoveLeftRight 25s linear infinite;
transition: transform .1s;
}
@keyframes MoveLeftRight {
0%,
100% {
...
4
голоса
2
ответа
98
показов
Помогите данный прелодер на css переписать на svg?
Главное, чтобы данный прелодер одинаковый вид при любом расширении, плюс надо чтобы символы тоже имели градиент. Можно конечно этого добиться на css, но все же это будет уже извращением...
Заранее ...
2
голоса
2
ответа
97
показов
Как сделать кнопку в стиле комиксов
Кнопка должна выглядеть так:
У меня получается что-то вроде такого. Но как добавить к тени skew я не знаю
html {
text-align: center;
}
.heroes {
background: #fff;
border: 2px solid #000;
...
3
голоса
1
ответ
78
показов
Как самостоятельно сделать анимацию SVG иконки
Требуется сделать векторную SVG иконку с анимацией на основе растрового образца.
Должны вращаться глаза
Язычок должен перемещаться справа-налево
Образец анимации:
Как сделать такую анимацию?
0
голосов
1
ответ
42
показа
Как добавить тень и разделить анимацию у объектов?
Необходимо добавить тень на карточки товара, а также разделить срабатывание анимации у всех карточек сразу. Сейчас, если навестись на "Подробнее", анимация срабатывает у всех трёх карточек.
...
2
голоса
1
ответ
41
показ
Выражение CSS3 @keyframes с использованием секунд вместо процентов
Я изучил синтаксис CSS3 @keyframes в январе 2016 года, и, более чем через 2 года, я обнаружил, что использую анимацию @keyframes в немалой части своей работы (более сложный, чем transitions CSS3, и ...
1
голос
1
ответ
58
показов
Не работает :hover для анимированной кнопки
Сделал анимированную кнопку. До подключения к ней анимации :hover работал и она увеличивалась. Когда добавил анимацию, при наведении ничего не происходит...
body{
margin: 0;
box-sizing: ...
4
голоса
2
ответа
233
показа
SVG и CSS анимация для иконки
У меня есть две иконки: одна в исходном состоянии, вторая иконка перечеркнута.
Я хочу анимировать зачеркивающую линию, но изменение dash-offset не помогает, поскольку это два разных svg.
Я смотрю на ...
0
голосов
0
ответов
121
показ
Как сделать так чтобы анимация css началась после нажатия кнопки?
Я верстаю сайт на HTML, CSS и я сделал CSS анимацию, только мне надо сделать чтобы только после нажатия на кнопку(id="show") и я не знаю как єто сделать....
2
голоса
2
ответа
184
показа
Анимация css3 движение звездочки по эллипсу svg
Подскажите пожалуйста, как сделать вращение звёздочки по синему кругу?
.svg__hidden{
display: none;
}
.ellipse {
width: 550px;
height: 160px;
border-radius: 50%;
top: 500px;
left: 0;
...