How to make text move on hover?

Question

css

Hello)
How to implement this idea:
With a sufficiently long text in a narrow and not high block, where only the
first words will be visible, and those that are further will be hidden, then on hover the title will be shown from edge to edge, in
order to better understand what I mean , found a similar effect on the video:
https://youtu.be/MUc2KlzGgvE

Answer 1

Option 1

HTML:

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }
}

@-moz-keyframes scroll {
    0% {
        -moz-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        -moz-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }
}

@keyframes scroll {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0)
    }
}

.marquee {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.marquee > span:hover {
    display: inline-block;
    padding-left: 100%;
    -webkit-animation: scroll 15s infinite linear;
    -moz-animation: scroll 15s infinite linear;
    animation: scroll 15s infinite linear;
}

Answer 2

Something like this) just need to finish the job))) https://codepen.io/aloky/pen/ddZdZR