How to make line rise every time?

Question

css

When you hover over a block, you need to make the line grow. In my code this only happens once: the animation doesn't work anymore. Preferably entirely in CSS. Thanks in advance!
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

animation should be hung on the :hover pseudo-class, and you have on the .Hover class