Belajar online – Membuat animasi dengan css

CSS ternyata tidak hanya untuk mempercantik tampilan saja akan tetapi dapat untuk membuat sebuah animasi. Tidak perlu lagi menggunakan flash untuk membuat animasi sehingga dapat mempercepat waktu load halaman web kita. Berikut cara membuat animasi dengan CSS :

   Pertama buatlah sebuah div yang akan diberi efek animasi <div id="box_animasi">
CSS animasi </div>. Baru kita buat css nya :

#box_animasi {

                background: #acce22;

                margin: 0px;

                height: 100%;

                width: 100%;

                display: block;

                position: absolute;

                z-index:9;

               

 /*kita membuat sebuah animasi dengan nama mymove dalam waktu 8 detik, forwards berarti cuman sekali dijalankan */

animation:mymove 8s;

animation-fill-mode: forwards;

-moz-animation:mymove 8s; /* Firefox */

-moz-animation-fill-mode: forwards;

-webkit-animation:mymove 8s; /* Safari and Chrome */

-webkit-animation-fill-mode: forwards;

-o-animation:mymove 8s; /* Opera */  

-o-animation-fill-mode: forwards;

}

@keyframes mymove

{

0% {z-index:9;display:'';opacity:100;} /*saat pertama (0% berarti detik ke 0) kotak akan muncul */

100% {z-index:-9;display:'none';opacity:0;} /*saat terakhir (100% berarti detik ke 8) kotak akan menghilang  */

}

@-moz-keyframes mymove /* Firefox */

{

0% {z-index:9;display:'';opacity:100;}

100% {z-index:-9;display:'none';opacity:0;}

}

@-webkit-keyframes mymove /* Safari and Chrome */

{

0% {z-index:9;display:'';opacity:100;}

100% {z-index:-9;display:'none';opacity:0;}

}

@-o-keyframes mymove /* Opera */

{

0% {z-index:9;display:'';opacity:100;}

100% {z-index:-9;display:'none';opacity:0;}

}

                Efek dari css diatas adalah div box_animasi akan menghilang dalam waktu 8 detik.