Cara Membuat Efek Fade-in Fade-out Teks dengan CSS3

kembali tentang cascading stylesheet, admin akan berbagi tentang efek Fade-in Fade-out ,setelah sebelumnya tentang cara membuat login popup dengan css3 . 
efek ini cocok untuk efek login, tanpa harus menggunakan flash yang terlalu berat.

cara pembuatannya, :
1. pertama, anda buat file basic html terlebih dahulu, simpan dengan nama index.html
2. buatlah stylenya yaitu cascading stylesheet 3, disini cssnya akan ada di head program index.html, jadi tidak diperlukan file baru, ini adalah codenya :

<style>

    body, html {

        text-align: center;

        font-size: 90px;

        font-family: Poiret One;

        height: 100%;

        background: -webkit-linear-gradient(315deg, #723362, #9d223c);

        background: linear-gradient(135deg, #723362, #9d223c);

        overflow: hidden;

        color: white;

    }



    .raka {

        position: relative;

        top: -webkit-calc(50% - 60px);

        top: calc(50% - 60px);

        text-shadow: 0px 0px 3px white;

    }

    .raka:nth-child(1) {

        -webkit-animation: fade 4s infinite 200ms;

        animation: fade 4s infinite 200ms;

    }

    .raka:nth-child(2) {

        -webkit-animation: fade 4s infinite 400ms;

        animation: fade 4s infinite 400ms;

    }

    .raka:nth-child(3) {

        -webkit-animation: fade 4s infinite 600ms;

        animation: fade 4s infinite 600ms;

    }

    .raka:nth-child(4) {

        -webkit-animation: fade 4s infinite 800ms;

        animation: fade 4s infinite 800ms;

    }

    .raka:nth-child(5) {

        -webkit-animation: fade 4s infinite 1000ms;

        animation: fade 4s infinite 1000ms;

    }

    .raka:nth-child(6) {

        -webkit-animation: fade 4s infinite 1200ms;

        animation: fade 4s infinite 1200ms;

    }

    .raka:nth-child(7) {

        -webkit-animation: fade 4s infinite 1400ms;

        animation: fade 4s infinite 1400ms;

    }



    @-webkit-keyframes fade {

        50% {

            opacity: 0.02;

        }

    }



    @keyframes fade {

        50% {

            opacity: 0.02;

        }

    }


</style>

3. setelah itu, untuk pemanggilan di bagian body, dari code code css di atas :

<span class='raka'>R</span>

<span class='raka'>A</span>

<span class='raka'>K</span>

<span class='raka'>A</span>

<span class='raka'></span>

<span class='raka'>A</span>

<span class='raka'>N</span>

4. simpan, dan jalankan di browser anda,(pastikan browser anda menunjang css3)

DOWNLOAD FULL SOURCE CODE

DEMO

Salam Joskoder

Raka Adi Nugroho