body{
margin:0;
padding:0;
background-color:#f1ff36;
font-family:verdana;
}
.center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
a{
position:relative;
text-decoration:none;
border:2px solid transparent;
width:100px;
height:50px;
text-align:center;
line-height:50px;
display:inline-block;
font-size:24px;
color:#262626;
}
a:before{
content:'';
position:absolute;
top:-2px;
left:-2px;
width:0;
height:0;
background:transparent;
border:2px solid transparent;
}
a:hover:before{
animation:animate 1s linear forwards;
}
@keyframes animate{
0%{
width:0;
height:0;
border-top-color:#262626;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
50%{
width:100%;
height:0;
border-top-color:#262626;
border-right-color:#262626;
border-bottom-color:transparent;
border-left-color:transparent;
}
100%{
width:100%;
height:100%;
border-top-color:#262626;
border-right-color:#262626;
border-bottom-color:transparent;
border-left-color:transparent;
}
}
a:hover:after{
animation:animate2 1s linear forwards;
animation-delay:1s;
}
@keyframes animate2{
0%{
width:0;
height:0;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:#262626;
}
50%{
width:0;
height:100%;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:#262626;
border-left-color:#262626;
}
100%{
width:100%;
height:100%;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:#262626;
border-left-color:#262626;
}
}
animate2根本无法正常工作，请告诉我此代码中出现的错误。
在此代码中，您可以看到有两个动画，第一个动画正常工作但第二个动画即animate2根本不起作用。告诉我我在哪个方面犯了错误我真的很困惑和沮丧尝试并尝试运行此代码但无济于事。