Animasi konten dengan css3

Dengan memanfaatkan checkbox sekarang kita bisa menampilkan Toogle konten menggunakan CSS3, dulu saya pernah posting mengenai Cara membuat box melayang dari atas itu menggunakan Jquery nah sekarang dengan CSS3 kita juga bisa membuat box melayang itu, cara ini memanfaatkan checkbox untuk melakukan Animasinya, jadi ketika checkbox di Cek/Centang maka konten akan muncul lalu saat checkbox tidak ter_Cek/Centang maka konten akan hilang.
DEMO
Dibawah ini Source kode nya.

<style type="text/css">
/* Kode from cssdeck */
input[type=checkbox] {
 visibility: hidden;
}
.roundedTwo {
 width: 28px;
 height: 28px;
 background: #fcfff4;

 background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
 margin: 5px auto;

 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;

 -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
 -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
 box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
 position: relative;
}

.roundedTwo label {
 cursor: pointer;
 position: absolute;
 width: 20px;
 height: 20px;

 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
 left: 4px;
 top: 4px;

 -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
 -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
 box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

 background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
 background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
 background: -o-linear-gradient(top, #222 0%, #45484d 100%);
 background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
 background: linear-gradient(top, #222 0%, #45484d 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.roundedTwo label:after {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 opacity: 0;
 content: '';
 position: absolute;
 width: 9px;
 height: 5px;
 background: transparent;
 top: 5px;
 left: 4px;
 border: 3px solid #fcfff4;
 border-top: none;
 border-right: none;

 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
}

.roundedTwo label:hover::after {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
 filter: alpha(opacity=30);
 opacity: 0.3;
}

.roundedTwo input[type=checkbox]:checked + label:after {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter: alpha(opacity=100);
 opacity: 1;
}

.roundedTwo input[type=checkbox]:checked ~ .konten {
 visibility: visible;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter: alpha(opacity=100);
        opacity: 1;
        top: 50px;
}
/* Kode By Me zhinto.blogspot.com */
.konten {
    position: absolute;
    width: 300px;
    padding: 0;
    background: #0056B4;
    border: 10px solid #BDBCBC;
    top: -1500px;
    left: -400px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    visibility: hidden;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    font: normal 12px/20px Arial, sans-serif;
    color: #FFF;
    -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    padding: 5px
    }
</style>

<div class="roundedTwo">
<input type="checkbox" value="None" id="roundedTwo" name="check" />
<label for="roundedTwo"></label>
<div class="konten"><img style="display:block;text-align:center;margin:0 auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1k9DG0_K4sCVu1zfm_3zo51zwaAvL-5DVrmZPPT43d-dZaTyOPMpB7LfwZtu0j9WBWvLiKVRVnDQl4b_9UvcHWTeF_deWwyiOjuwcG5Susg0gC1F1orEwjLIBAb2XK4Se7OD-dWHQ9ts/s1600/4.jpg"/>Disini isi dari konten anda bisa berupa gambar ataupun teks terserah anda mau isi apaan,</div>
</div>

Kodenya masih bisa anda kembangkan lagi sesuai kreasi anda silahkan ber_kreativitas.