CSS3 Marquee

by Wray Bowling

HTML

<marquee>The original marquee is jittery. I never liked it that much.</marquee>

<div class="marquee"><p>The original marquee is jittery. I never liked it that much.</p></div>

<marquee direction="right">The original marquee is jittery. I never liked it that much.</marquee>

<div class="marquee-right"><p>The original marquee is jittery. I never liked it that much.</p></div>

CSS

[class^="marquee"]{
    display:block;
    overflow:hidden;
}

.marquee > *,
.marquee-left > *{
    -webkit-animation: marquee-left 15s linear infinite;
    -moz-animation: marquee-left 15s linear infinite;
    animation: marquee-left 15s linear infinite;
}

.marquee-right > *{
    -webkit-animation: marquee-right 15s linear infinite;
    -moz-animation: marquee-right 15s linear infinite;
    animation: marquee-right 15s linear infinite;
}

@-webkit-keyframes marquee-left{
    0% {
        -webkit-transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
    }
}

@-webkit-keyframes marquee-right{
    0% {
        -webkit-transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(100%);
    }
}


@keyframes marquee-left{
    0% {
        -webkit-transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes marquee-right{
    0% {
        -webkit-transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(100%);
    }
}