привет, я пытаюсь создать кнопку навигационного ящика и хочу анимировать ее при наведении курсора на нее, а затем анимировать при наведении курсора, задаваясь вопросом, возможно ли это сделать только в css. вот как далеко я зашел, а также я столкнулся с проблемой, когда анимация закончена, масштаб строки меняется обратно на обычный, а не на анимацию.
<button id = "navbut" style = "position: fixed;right: 0;">
<div id = "line1"></div>
<div id = "line2"></div>
<div id = "line3"></div>
</button>
#line1 {
position : relative;
height : 1px;
width : 3em;
background : rgb(255, 255, 255);
margin-top : 0.625rem;
transform-origin : 100% 50% 0px;
transform : translate(0px);
}
#line2 {
position : relative;
height : 1px;
width : 3em;
background : rgb(255, 255, 255);
margin-top : 0.725rem;
transform-origin : 100% 50% 0px;
transform : translate(0px);
}
#line3 {
position : relative;
height : 1px;
width : 3em;
background : rgb(255, 255, 255);
margin-top : 0.825rem;
transform-origin : 100% 50% 0px;
transform : translate(0px);
}
#navbut {
background : none;
width : 3rem;
top : 0.rem;
cursor : pointer;
border : none;
}
#navbut:hover>#line1 {
animation: sha 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#navbut:hover>#line2 {
animation: sh 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@keyframes sh {
100% {transform: scale(0.75, 1); }
}
@keyframes sha {
100% {transform: scale(0.45, 1); }
}
я хочу, чтобы, когда мышь находится над элементом после завершения анимации, оставаться в этом масштабе, а не возвращаться назад, и, если возможно, анимировать наведение
Можно без анимации. Просто используйте преобразование.
Пример:
button{
transform: scale(1);
transition: transform ease 1s;
}
button:hover{
transform: scale(0.89);
}
да, у меня была такая же проблема, и это было так просто. Анимации будут воспроизводиться через выбранное время, но преобразования только преобразуются и ждут, пока вы не дадите им другую команду.