Display user feedback without marquee / javascript / jquery

Question

I want to display some feedback (max 80 words in four lines) on a website; Here maximum i can use 20% height of the screen (with 100% horizontal width)

Currently, I'm using code mentioned below:

<marquee scrollamount="1" behavior="scroll" direction="up" height="20%" onmouseover="this.stop();" onmouseout="this.start();">
    ABCD<br/>
    Sample Text<br/><br/> 
    XYZ<br/>
    New Sample Text<br/>
</marquee>

Today i read marquee is depreciated tag and there are many options to achieve similar effect using jQuery.

I've one more constraint ; to NOT use any jQuery / javascript on the page. Is there any good suggestion to display user feedback keeping in mind points mentioned above.

Answer 1

You can achieve a marquee effect using purely CSS

Demo Fiddle (Horizontal) (Vertical)

HTML

<p class="marquee">text text text text text</p>

CSS

.marquee {
    width: 450px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 4s linear infinite;
}
.marquee:hover {
    animation-play-state: paused
}
@keyframes marquee {
    0% {
        text-indent: 27.5em
    }
    100% {
        text-indent: -10em
    }
}