В течении пяти секунд она должна так заполнятся, не могу понять как это сделать
1 ответ
Можно использовать стрелку как текстовый символ и продублировать её псевдоэлементом с другим цветом.
.arrow{
display:inline-block;
position:relative;
font-size:50px;
}
.arrow:before{
content:'↓';
position:absolute;
top:0;
left:0;
width:100%;
height:0;
overflow:hidden;
color:red;
animation:arrow 5s linear infinite;
}
@keyframes arrow{
to{
height:100%;
}
}
<span class="arrow">↓</span>