Новые ответы с меткой css-animation
0
голосов
Правильно ли использовать input для выпадающего меню или все же js лучше подключить? middle and up
Я использовал такой метод когда создавал AMP страницы, где нельзя использовать сторонний JS на странице, тогда это оправдано. Что б сохранить дизайн страницы как для стандартной так и для amp версии ...
0
голосов
Правильно ли использовать input для выпадающего меню или все же js лучше подключить? middle and up
Знаю такой способ создания бургера с использованием input type checkbox для выпадающего меню, но сам его не использую так как проще и правильней это сделать с помощью JavaScript с использованием ...
0
голосов
Как сделать анимацию svg заливки цветом?
Если я правильно поняла Вашу задачу, то вот так это можно реализовать
<svg height="200px" width="200px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3....
0
голосов
Как сделать анимацию svg заливки цветом?
Надо смотреть от картинки... если я правильно понял идею, что это прелоадер, то можно так.
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
...
0
голосов
Убрать мерцание при ховере изменяеться высота карточки и нижний блок отключаеться и кнопка выпает из блока. при наведении снизу появляеться мерцании
У тебя было несколько синтаксических ошибок в CSS коде, подправил в редакторе кода, вот посмотри результат:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&...
0
голосов
Принятый
Как реализовать анимацию при ховере
Там используется спрайт, то есть svg файл с двумя видами стрелки черной и белой, где при наведении изображение меняет свою позицию:
.button {
display: inline-flex;
align-items: center;
...
1
голос
Анимация BOUNCE
Поступали предложения вообще избавиться от JS.
Dovgal Dima абсолютно прав !
Но мне важно было добить именно ту функцию. Дмитрий помог и я ему благодарен.
А вот ответ для любителей CSS:
body {
...
1
голос
Принятый
Анимация BOUNCE
// Получаем ширину доступного окна (ширину экрана)
const windowWidth = window.innerWidth;
// Получаем значение CSS-переменной --wide
const catWidthValue = getComputedStyle(document.documentElement)....
0
голосов
Принятый
Анимация изменения фона блока
например так, добавить через псевдоэлемент и очень больной запас left и top при hover. Кнопку придется позиционировать абсолютно, не в том же блоке что и картинка и текст чтобы при ховере не перекрыть ...
0
голосов
css animation деформация свг
#lll {
animation: skew 10s infinite 0s linear;
}
@keyframes skew {
0% {
transform: skew(0deg);
}
50% {
transform: skewY(-15deg);
transform: skewX(15deg);
}
100% {
...
1
голос
Принятый
Как сделать плавный transition для background-image при :hover
Анимировать можно только измеряемые значения, а фон-картинка к таковым не относится.
Можно сделать дополнительный дочерний контейнер, засунуть в него картинку, спозиционировать сверху, сделать opacity:...
50 лучших ответов включены
Связанные метки
css-animation × 833css × 654
html × 324
css3 × 297
javascript × 264
svg × 254
анимация × 158
svg-animation × 120
html5 × 118
jquery × 84
вёрстка × 52
keyframes × 20
transform × 13
transition × 13
vue.js × 11
reactjs × 10
animate × 9
bootstrap × 8
canvas × 8
scss × 7
frontend × 6
hover × 6
dom × 5
slider × 5
menu × 5