Я нахожусь на тренировке для плавного выпадающего меню.Выглядит хорошо, но у меня есть некоторые ошибки, которые мне нужны по поводу
1 - мне нужен короткий код для ключевых кадров (я сделал ключевой кадр для каждой ссылки) 2 - я должен оставаться в подвешенном состоянии, пока время анимации не будетболее (когда я удаляю мышь из (мои
ссылки) кнопки, плавность исчезает).Мне нужно, чтобы выпадающее меню плавно исчезало, когда я удаляю мышь (мои ссылки)
Надеюсь, что проблема ясна, хотя я здесь за дальнейшие объяснения, спасибо.
Воткод:
body{
box-sizing: border-box;
}
.animation{
height: 300px;
}
.box{
background-color: yellow;
display: block;
width: 150px;
font-size: 30px;
border-radius: 20px;
height: 40px;
position: relative;
left: 120px;
top: 10px;
color: blue;
}
li{
list-style: none;
}
.box a{
background-color: #f0f;
display: block;
width: 150px;
height: 40px;
margin-bottom: 1px;
line-height: 50px;
text-align: center;
text-decoration: none;
margin-left: -20px;
font-size: 25px;
border-radius: 20px;
position: relative;
transition: all 1s ease-in-out;
}
@keyframes smooth1{
0%{
transform: translateY(0);
}
25%,100%{
transform: translateY(40px);
}
50%{
transform: translateY(35px);
}
75%{
transform: translateY(45px);
}
}
@keyframes smooth2{
0%{
transform: translateY(0);
}
25%,100%{
transform: translateY(80px);
}
50%{
transform: translateY(75px);
}
75%{
transform: translateY(85px);
}
}
@keyframes smooth3{
0%{
transform: translateY(0);
}
25%,100%{
transform: translateY(120px);
}
50%{
transform: translateY(115px);
}
75%{
transform: translateY(125px);
}
}
@keyframes smooth4{
0%{
transform: translateY(0);
}
25%,100%{
transform: translateY(160px);
}
50%{
transform: translateY(155px);
}
75%{
transform: translateY(165px);
}
}
.box:hover .l1{
transform: translateY(40px);
animation: smooth1 1.2s ease-in-out ;
}
.box:hover .l2{
transform: translateY(80px);
animation: smooth2 1.2s ease-in-out ;
}
.box:hover .l3{
transform: translateY(120px);
animation: smooth3 1.4s ease-in-out ;
}
.box:hover .l4{
transform: translateY(160px);
animation: smooth4 1.6s ease-in-out ;
}
.box .l1{
background-color: #e00;
top: -34px;
z-index: -4;
}
.box .l2{
background-color: #e9f;
top: -75px;
z-index: -3;
}
.box .l3{
background-color: #f90;
top: -116px;
z-index: -2;
}
.box .l4{
background-color: #9f0;
top: -157px;
z-index: -1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel=stylesheet href="animation training(smooth droplist).css">
</head>
<body>
<div class="animation">
<ul class="box">my links
<li><a href="#" class="l1">facebook</a></li>
<li><a href="#" class="l2">youtube</a></li>
<li><a href="#" class="l3">twitter</a></li>
<li><a href="#" class="l4">instgram</a></li>
</ul>
</div>
</body>
</html>