<a href="#">hover
<div class="div2">
<p>qwerqwerqwer</p>
</div>
</a>
a:hover .div2{
animation: 0.5s div2 ease-in forwards;
}
a:hover p{
display: block;
}
@keyframes div2{
0%{height: 0; }
100%{height: 200px; }
}
.div2{
width: 200px;
background-color: red;
}
p{
display: none;
}
a:hover .div2{
animation: 2.5s div2 ease-in forwards;
}
a:hover p{
display: block;
animation: 0.5s div1 ease-in forwards;
animation-delay:2.5s;
}
@keyframes div2{
0%{height: 0; }
100%{height: 200px; }
}
@keyframes div1{
0%{opacity: 0; }
100%{opacity: 1; }
}
.div2{
width: 200px;
background-color: red;
}
p{
opacity: 0;
display: none;
}
a:hover .div2{
animation: 0.5s div2 ease-in forwards;
}
a:hover p{
animation: 0.5s p ease-in forwards;
}
@keyframes div2{
0%{height: 0; }
100%{height: 200px; }
}
@keyframes p{
0%{opacity:0}
100%{opacity:1}
}
.div2{
width: 200px;
background-color: red;
}
p{
display: block;
opacity:0;
}
给p也加动画