Как сделать нарастание линии каждый раз?

Question

[Floydreme]

Нужно при наведении курсора на блок сделать нарастание линии. В моем коде это происходит только один раз: больше анимация не работает. Желательно полностью на 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;
}

Answer 1

[Айнур Валиев]

анимацию надо вешать на псевдокласс :hover , а у тебя на класс .Hover

Comments

[Floydreme]

Этот класс вложен в другой класс, чтобы выполнять ещё одну анимацию.
Работает так: есть div с классом, внутри него лежит картинка. Когда я навожу на картинку, она пропадает и я меняю Background на какой-то цвет с анимацией(т.е. класс Hover начал свою работу). И когда это произошло, должна анимироваться линия

[Айнур Валиев]

Floydreme, давай как в codepen все это.

[Floydreme]

Айнур Валиев, я в школе ((

[Айнур Валиев]

Floydreme, а я в офисе((

[Floydreme]

Айнур Валиев, https://codepen.io/floydreme/pen/WJOypP

[Айнур Валиев]

Floydreme, как я и писал раньше, вешай анимацию на псевдокласс :hover
https://codepen.io/vaajnur/pen/YLQvdL

[Floydreme]

Айнур Валиев, ОГРОМНОЕ СПАСИБО