Нужно при наведении курсора на блок сделать нарастание линии. В моем коде это происходит только один раз: больше анимация не работает. Желательно полностью на CSS. Заранее Спасибо!
HTML:
<div class="Grid">
<div class="Item">
<div class="CH">
<a href="../Application-Pages/CurrencyHelper.html" target="_blank">
<div class="Hover">
<h4>
CurrencyHelper
</h4>
<hr class="Line" size="3">
<p>
Your personal assistant in exchange rates.
</p>
</div>
</a>
</div>
</div>
CSS:
/*Линия*/
.Hover .Line {
background: #F5FAFF;
border: 0;
opacity: 0;
animation-duration: 0.8s;
animation-name: Line;
margin-left: 110px;
margin-top: -20px;
animation-play-state: paused;
width: 100px;
height: 3px;
}
/*Анимация линии*/
@keyframes Line {
0%{
width: 10px;
}
100%{
width: 100px;
}
}
/*Анимация появления*/
.CH .Hover{
opacity:0;
transition: opacity .3s;
background: rgba(30, 140, 255, 0.95);
width: 100%;
height: 321px;
}
.CH:hover .Hover{
opacity: 1;
}
.CH:hover .Line{
opacity: 1;
animation-play-state: running;
}
Простой
