Tag Archives: CSS3 Transition

Membuat Efek Fade-in/Fade-out dengan CSS3

Leave a reply
css3 transition

css3 transition

Hallo, ketemu lagi di coding website… Kali ini saya mencoba membuat efek fade-in dan fade-out elemen div dengan menggunakan fungsi transition yang ada di CSS3.

Coding ini biasa saya gunakan untuk menampilkan pesan error dalam box yang dapat hilang dalam beberapa detik (auto close box).

Baiklah, langsung saja saya berikan coding selengkapnya dibawah ini.

<!DOCTYPE html>
<html>
<head>
<title>CSS3 Transition</title>
<style type="text/css">
#box
{   position:fixed;top:50%;left:50%;
    margin-top:-100px;margin-left:-200px;
    width:350px;height:80px;
    font-size:20px;color:#FFFFFF;
    padding:15px;text-align:center;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    background-color:#00b953;
    transition:opacity 1s ease-in-out;
    -webkit-transition:opacity 1s ease-in-out;
    -moz-transition:opacity 1s ease-in-out;
    -o-transition:opacity 1s ease-in-out;
}
#box.fade-out{opacity:0;transition-delay: 2s;}
#box.fade-in{opacity:1;transition-delay: 2s;}
</style>
<script type="text/javascript">
function fade(btnElement)
{   if (btnElement.value === "Fade Out") {
        document.getElementById("box").className = "fade-out";
        btnElement.value = "Fade In";
    }
    else {
        document.getElementById("box").className = "fade-in";
        btnElement.value = "Fade Out";
    }
}
</script>
</head>
<body>
    <h3>Membuat Efek Fade-in/Fade-out dengan CSS</h3>
    <input id="mybutton" type="button" value="Fade Out" onclick="fade(this);" />
    <div id="box" >
        Perhatian<hr>
	Informasi ini akan hilang dalam 3 detik!
    </div>
</body>
</html>

Selamat mencoba. semoga berhasil.