html - Marquee doesnot scroll smoothly, need 100% smooth scroll for marquee -


i using marquee scroll right side left. below code works fine. not scrolling smoothly. content "hover on me stop" blinking or flashing. need 100% smooth scroll below marquee. please me. whether possible without javascript??

<marquee behavior='scroll' direction='left' scrollamount='3' onmouseover='this.stop()' onmouseout='this.start()'>hover on me stop</marquee> 

if wish try using pure css easiest approach. though need check support older browsers , add vendor prefixes.

.marquee-parent {    position: relative;    width: 100%;    overflow: hidden;    height: 30px;  }  .marquee-child {    display: block;    width: 147px;    /* width of text div */    height: 30px;    /* height of text div */    position: absolute;    animation: marquee 5s linear infinite; /* change 5s value desired speed */  }  .marquee-child:hover {    animation-play-state: paused;    cursor: pointer;  }  @keyframes marquee {    0% {      left: 100%;    }    100% {      left: -147px /* same text width */    }  }
<div class="marquee-parent">    <div class="marquee-child">      hover on me stop    </div>  </div>


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -