membuat marquee dengan animasi CSS3

Mungkin sobat sudah tau kan tentang marquee membuat effect tulisan berjalan, biasanya marquee dibuat dengan perintah sederhana menggunakan HTML
seperti ini <marquee>text berjalan</marquee>

text berjalan dan ini lain lagi disini kita menggunakan perintah css3 dan hasilnya lumaya bagus dan menarik coba lihat demonya dibawah ini
Demo

babagi mana keren kan nah ini dia codenya

untuk cssnya

html {
    background: url('https://doc-0c-18-docs.googleusercontent.com/docs/securesc/at5qgrk6359kc6hoa1md7jibt23o68o1/otr7g4brjluabdt0no09c5m8f3df0eom/1366171200000/16876751492319263896/16876751492319263896/0B8tmm86DwLq_UWoybHlpVEJadU0?e=download');
}
h1, h2, h3 {
    font-family: Tahoma, Arial, sans-serif;
    color: #fff;
    text-shadow: 1px 1px 0px #000000;
    filter: dropshadow(color=#000000, offx=1, offy=1);
}
a {
    color: #00b1dc;
    text-decoration: none;
}
a:hover {
    color: #0097bc;
}
.wrapper {
    width: 500px;
    margin: 25px auto;   
}
.marquee {
    width: 500px;
    height: 50px;
    margin: 25px auto;
    overflow: hidden;
    position: relative;
    border: 1px solid #000;

    background-color: #222;

    -webkit-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: inset 0px 2px 2px  rgba(0, 0, 0, .5), 0px 1px 0px  rgba(250, 250, 250, .2);
    box-shadow: inset 0px 2px 2px  rgba(0, 0, 0, .5), 0px 1px 0px  rgba(250, 250, 250, .2);

    -webkit-transition: background-color 350ms;
    -moz-transition: background-color 350ms;
    transition: background-color 350ms;
}

.marquee p {
    position: absolute;

    font-family: Tahoma, Arial, sans-serif;

    width: 100%;
    height: 100%;

    margin: 0;
    line-height: 50px;

    text-align: center;

    color: #fff;
    text-shadow: 1px 1px 0px #000000;
    filter: dropshadow(color=#000000, offx=1, offy=1);

    transform:translateX(100%);
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%);
}
.marquee p:nth-child(1) {
    animation: left-one 20s ease infinite;
    -moz-animation: left-one 20s ease infinite;
    -webkit-animation: left-one 20s ease infinite;
}
.marquee p:nth-child(2) {
    animation: left-two 20s ease infinite;
    -moz-animation: left-two 20s ease infinite;
    -webkit-animation: left-two 20s ease infinite;
}
.marquee.down p {
    transform:translateY(-100%);
    -moz-transform:translateY(-100%);
    -webkit-transform:translateY(-100%);
}
.marquee.down p:nth-child(1) {
    animation: down-one 20s ease infinite;
    -moz-animation: down-one 20s ease infinite;
    -webkit-animation: down-one 20s ease infinite;
}
.marquee.down p:nth-child(2) {
    animation: down-two 20s ease infinite;
    -moz-animation: down-two 20s ease infinite;
    -webkit-animation: down-two 20s ease infinite;
}
.marquee.up p {   
    transform:translateY(100%);
    -moz-transform:translateY(100%);
    -webkit-transform:translateY(100%);
}
.marquee.up p:nth-child(1) {
    animation: up-one 20s ease infinite;
    -moz-animation: up-one 20s ease infinite;
    -webkit-animation: up-one 20s ease infinite;
}
.marquee.up p:nth-child(2) {
    animation: up-two 20s ease infinite;
    -moz-animation: up-two 20s ease infinite;
    -webkit-animation: up-two 20s ease infinite;
}

/*================================
    Move the Marquee to the Left
==================================*/

/** Mozilla Firefox Keyframes **/
@-moz-keyframes left-one {
    0%    {
        -moz-transform:translateX(100%);
    }
    10% {
        -moz-transform:translateX(0);
    }
    40% {
        -moz-transform:translateX(0);
    }
    50% {
        -moz-transform:translateX(-100%);
    }
    100%{
        -moz-transform:translateX(-100%);
    }
}
@-moz-keyframes left-two {
    0% {
        -moz-transform:translateX(100%);
    }
    50% {
        -moz-transform:translateX(100%);
    }
    60% {
        -moz-transform:translateX(0);       
    }
    90% {
        -moz-transform:translateX(0);       
    }
    100%{
        -moz-transform:translateX(-100%);
    }
}
/** Webkit Keyframes **/
@-webkit-keyframes left-one {
    0% {
        -webkit-transform:translateX(100%);
    }
    10% {
        -webkit-transform:translateX(0);
    }
    40% {
        -webkit-transform:translateX(0);
    }
    50% {
        -webkit-transform:translateX(-100%);
    }
    100%{
        -webkit-transform:translateX(-100%);
    }
}
@-webkit-keyframes left-two {
    0% {
        -webkit-transform:translateX(100%);
    }
    50% {
        -webkit-transform:translateX(100%);
    }
    60% {
        -webkit-transform:translateX(0);       
    }
    90% {
        -webkit-transform:translateX(0);       
    }
    100%{
        -webkit-transform:translateX(-100%);
    }
}

/*================================
    Move the Marquee Downwards
==================================*/

/** Mozilla Firefox Keyframes **/
@-moz-keyframes down-one {
    0%    {
        -moz-transform:translateY(-100%);
    }
    10% {
        -moz-transform:translateY(0);
    }
    40% {
        -moz-transform:translateY(0);
    }
    50% {
        -moz-transform:translateY(100%);
    }
    100%{
        -moz-transform:translateY(100%);
    }
}
@-moz-keyframes down-two {
    0% {
        -moz-transform:translateY(-100%);
    }
    50% {
        -moz-transform:translateY(-100%);
    }
    60% {
        -moz-transform:translateY(0);       
    }
    90% {
        -moz-transform:translateY(0);       
    }
    100%{
        -moz-transform:translateY(100%);
    }
}

/** Webkit Keyframes **/
@-webkit-keyframes down-one {
    0% {
        -webkit-transform:translateY(-100%);
    }
    10% {
        -webkit-transform:translateY(0);
    }
    40% {
        -webkit-transform:translateY(0);
    }
    50% {
        -webkit-transform:translateY(100%);
    }
    100%{
        -webkit-transform:translateY(100%);
    }
}
@-webkit-keyframes down-two {
    0% {
        -webkit-transform:translateY(-100%);
    }
    50% {
        -webkit-transform:translateY(-100%);
    }
    60% {
        -webkit-transform:translateY(0);       
    }
    90% {
        -webkit-transform:translateY(0);       
    }
    100%{
        -webkit-transform:translateY(100%);
    }
}

/*================================
    Move the Marquee Upwards
==================================*/

/** Mozilla Firefox Keyframes **/
@-moz-keyframes up-one {
    0%    {
        -moz-transform:translateY(100%);
    }
    10% {
        -moz-transform:translateY(0);
    }
    40% {
        -moz-transform:translateY(0);
    }
    50% {
        -moz-transform:translateY(-100%);
    }
    100%{
        -moz-transform:translateY(-100%);
    }
}
@-moz-keyframes up-two {
    0% {
        -moz-transform:translateY(100%);
    }
    50% {
        -moz-transform:translateY(100%);
    }
    60% {
        -moz-transform:translateY(0);       
    }
    90% {
        -moz-transform:translateY(0);       
    }
    100%{
        -moz-transform:translateY(-100%);
    }
}

/** Webkit Keyframes **/
@-webkit-keyframes up-one {
    0% {
        -webkit-transform:translateY(100%);
    }
    10% {
        -webkit-transform:translateY(0);
    }
    40% {
        -webkit-transform:translateY(0);
    }
    50% {
        -webkit-transform:translateY(-100%);
    }
    100%{
        -webkit-transform:translateY(-100%);
    }
}
@-webkit-keyframes up-two {
    0% {
        -webkit-transform:translateY(100%);
    }
    50% {
        -webkit-transform:translateY(100%);
    }
    60% {
        -webkit-transform:translateY(0);       
    }
    90% {
        -webkit-transform:translateY(0);       
    }
    100%{
        -webkit-transform:translateY(-100%);
    }
}

codenya cukup panjang tidak sesimpel HTML

dan untuk tag HTMLnya sebagai berikut

<html>
    <head>
        <title>Creating Advanced Marquee with CSS3 Animation - Demo</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="styles/styles.css">
    </head>
    <body>
<div class="wrapper">
    <h1>Marquee with CSS3 Animation</h1>
    <h3>Move the text from the right to the left</h3>
    <div class="marquee">
        <p>contoh marquee dengan HTML5 dan css3</p>
                <p>      contoh marquee dengan HTML5 dan css3 </p>

    </div>
   
</div>
</body>
</html> 

dan selamat mencoba semoga berhasil

Share on Google Plus

About Budi Setiawan

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.