Marquee Effect with CSS3 Animation

more info visit http://rian-nurherdian.blogspot.com

HTML

<p class="marquee">Hidup adalah Pilihan! Pintar-pintar lah dalam Memilih .. Hidup adalah Pilihan! Pintar-pintar lah dalam Memilih .. Hidup adalah Pilihan! Pintar-pintar lah dalam Memilih .. ( <a href="http://rian-nurherdian.blogspot.com">Rian Nurherdian</a> )</p>

CSS

/* Marquee Effect with Pure CSS3 Animation */
.marquee {
    width: 450px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 20s linear infinite;
    -webkit-animation: marquee 20s linear infinite;
}

.marquee:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

/* Dibawah adalah Keyframe Marquee */
@keyframes marquee {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
}
@-webkit-keyframes marquee {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
}