Cara menggunakan bootstrap fade out

Transition.jsadalah peristiwa transitionEnd dan transisi CSS simulator kelas pembantu dasar. Hal ini digunakan untuk memeriksa dukungan plug-in efek CSS transisi lainnya, dan digunakan untuk mendapatkan efek transisi.

Gunakan Kasus

Transisi [Transition] kasus widget digunakan:

Hai all, ketemu lagi bersama saya pria tampan asli sunda hehe2x, untuk tutorial kali ini saya akan membuat animasi text sederhana di CSS 3 yang mudah di mengerti, animasi text ini juga bisa di gunakan untuk loading aplikasi anda.

Ok langsung saja, coba lihat script HTML dibawah ini, perhatikan pada bagian class=”test”.

A
N
D
E
Z
N
E
T

Setelah itu kita buat style css seperti dibawah ini tempat kan pada bagian head.

    body, html { 
        text-align: center;
        font-size: 90px;
        font-family: Poiret One;
        height: 100%;
        background: -webkit-linear-gradient[315deg, #000000, #000000];
        background: linear-gradient[135deg, #000000, #000000];
        overflow: hidden;
        color: white;
    }
 
    .test {
        position: relative;
        top: -webkit-calc[50% - 60px];
        top: calc[50% - 60px];
        text-shadow: 0px 0px 3px white;
    }
    .test:nth-child[1] {
        -webkit-animation: fade 4s infinite 200ms;
        animation: fade 4s infinite 200ms;
    }
    .test:nth-child[2] {
        -webkit-animation: fade 4s infinite 400ms;
        animation: fade 4s infinite 400ms;
    }
    .test:nth-child[3] {
        -webkit-animation: fade 4s infinite 600ms;
        animation: fade 4s infinite 600ms;
    }
    .test:nth-child[4] {
        -webkit-animation: fade 4s infinite 800ms;
        animation: fade 4s infinite 800ms;
    }
    .test:nth-child[5] {
        -webkit-animation: fade 4s infinite 1000ms;
        animation: fade 4s infinite 1000ms;
    }
    .test:nth-child[6] {
        -webkit-animation: fade 4s infinite 1200ms;
        animation: fade 4s infinite 1200ms;
    }
    .test: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;
        }
    }

Nah selesai deh, kita bisa atur warna,waktu dan fade in & fade out pada css di atas, untuk sccript lengkapnya bisa di copy paste script dibawah ini :

DOCTYPE html>

  
    
    
    
    
    
 
   
    body, html { 
        text-align: center;
        font-size: 90px;
        font-family: Poiret One;
        height: 100%;
        background: -webkit-linear-gradient[315deg, #000000, #000000];
        background: linear-gradient[135deg, #000000, #000000];
        overflow: hidden;
        color: white;
    }
 
    .test {
        position: relative;
        top: -webkit-calc[50% - 60px];
        top: calc[50% - 60px];
        text-shadow: 0px 0px 3px white;
    }
    .test:nth-child[1] {
        -webkit-animation: fade 4s infinite 200ms;
        animation: fade 4s infinite 200ms;
    }
    .test:nth-child[2] {
        -webkit-animation: fade 4s infinite 400ms;
        animation: fade 4s infinite 400ms;
    }
    .test:nth-child[3] {
        -webkit-animation: fade 4s infinite 600ms;
        animation: fade 4s infinite 600ms;
    }
    .test:nth-child[4] {
        -webkit-animation: fade 4s infinite 800ms;
        animation: fade 4s infinite 800ms;
    }
    .test:nth-child[5] {
        -webkit-animation: fade 4s infinite 1000ms;
        animation: fade 4s infinite 1000ms;
    }
    .test:nth-child[6] {
        -webkit-animation: fade 4s infinite 1200ms;
        animation: fade 4s infinite 1200ms;
    }
    .test: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;
        }
    }

 
 
Andeznet
A
N
D
E
Z
N
E
T
 
 
 
  

Selesai deh, untuk DEMO nya bisa cek link nya disini

Terima kasih.

Jasa Pembuatan Aplikasi web contact person email:admin@andeznet.com atau chat di sebelah pojok kanan website