Я не могу понять, как остановить привязку, когда пользователь наведен на фон моего сайта
У меня есть ключевые кадры для анимации, но я попытался добавить переход, преобразование и анимацию в нормальное состояние, чтобы облегчить анимацию, но ничего не сработало. Это код для анимации при наведении курсора.
.shadow-pop-bl:hover {
-webkit-animation: shadow-pop-bl 0.3s cubic-bezier(0.470, 0.000,
0.745, 0.715) both;
animation: shadow-pop-bl 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715)
both;
}
@keyframes shadow-pop-bl {
0% {
box-shadow: 0 0 #c4c8d4, 0 0 #c4c8d4, 0 0 #c4c8d4, 0 0 #c4c8d4, 0 0
#c4c8d4, 0 0 #c4c8d4, 0 0 #c4c8d4, 0 0 #c4c8d4;
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
100% {
box-shadow: -1px 1px #c4c8d4, -2px 2px #c4c8d4, -3px 3px #c4c8d4, -4px
4px #c4c8d4, -5px 5px #c4c8d4, -6px 6px #c4c8d4, -7px 7px #c4c8d4,
-8px 8px #c4c8d4;
-webkit-transform: translateX(8px) translateY(-8px); transform:
translateX(8px) translateY(-8px);
}
}
Ответы 1
Проблема в том, что вы устанавливаете анимацию только в состояние :hover и ожидаете, что она будет применяться, когда элемент не зависает (когда очевидно, что для него вообще не установлена анимация любой).
Один из способов решить эту проблему - определить анимацию для элемента без зависания и изменить ее при наведении. Но для твоего дела это уже излишек.
Для этого типа (простого) случая (включение / выключение анимации) установка
- значения свойств без зависания (если вы не хотите начинать со значений по умолчанию)
- значения свойств при наведении
- переходные стойки (
-timing-function,-duration,-delay,-property) без зависания
...достаточно. Если вам нужны разные значения для свойств перехода при наведении курсора на элемент, укажите их в правилах :hover, помещенных после правил для нормального элемента.
В заключение, для вашего случая этого хватило:
.shadow-pop-bl {
transition: box-shadow .42s cubic-bezier(.5,0,.3,1);
}
.shadow-pop-bl:hover {
box-shadow: 1px 1px #c4c8d4, 2px 2px #c4c8d4, 3px 3px #c4c8d4, 4px 4px #c4c8d4,
5px 5px #c4c8d4, 6px 6px #c4c8d4, 7px 7px #c4c8d4, 8px 8px #c0c4d0;
}
Примечание: Я удалил translate не только для упрощения примера, но и потому, что изменение положения элемента при наведении считается плохим пользовательским интерфейсом (при наведении курсора на область, которую оставляет элемент, возникает мерцание между наведением и отсутствием наведения).
.shadow-pop-bl {
transition: box-shadow .42s cubic-bezier(.5,0,.3,1);
}
.shadow-pop-bl:hover {
box-shadow:
1px 1px #c4c8d4, 2px 2px #c4c8d4, 3px 3px #c4c8d4, 4px 4px #c4c8d4,
5px 5px #c4c8d4, 6px 6px #c4c8d4, 7px 7px #c4c8d4, 8px 8px #c4c8d4,
9px 9px #c4c8d4, 10px 10px #c4c8d4, 11px 11px #c4c8d4, 12px 12px #c4c8d4,
13px 13px #c4c8d4, 14px 14px #c4c8d4, 15px 15px #c4c8d4, 16px 16px #c4c8d4,
17px 17px #c4c8d4, 18px 18px #c4c8d4, 19px 19px #c4c8d4, 20px 20px #c0c4d0;
}
/* rest is irrelevant */
.shadow-pop-bl {
background-color: white;
padding: 2rem;
border: 1px solid #fcfcfc;
cursor: pointer;
max-width: 240px;
text-align: center;
margin: 0 auto;
}
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
body, html {
height: 100%;
}<div class = "shadow-pop-bl">Lorem ipsum dolor sit amet<br>Lorem ipsum dolor sit amet<br></div>Огромное спасибо! Я пытался добавить анимацию к элементу без зависания, но ключевые кадры выбрасывали ее. Спасибо за урок и за упрощение его для меня. @ Андрей Георгиу
Не могли бы вы предоставить видео или более подробное объяснение проблемы, я не думаю, что понимаю, что не так или что вы хотите исправить.