Cara Menggunakan Fungsi bounceIn Pada CSS dan menarik

Hallo sobat, jumpa lagi dengan saya di tutorial Dumet School. Pada artikel kali ini kita akan belajar tentang Cara Menggunakan Fungsi bounceIn Pada CSS. BounceIn ini adalah sebuah style untuk di kolaborasikan dengan animasi CSS sehingga hasilnya sangat menarik. Fungsi bounce ini sama dengan bounce pada Jquery, yang berbeda hanya cara pengetikannya saja dan bounce pada CSS ini memang agak berat load nya jika di bandingkan dengan Jquery. Di bawah ini adalah demo gambarnya, untuk teman-teman bebas siapkan gambar apa saja yang nanti kita akan gunakan dalam latihan ini

Seperti yang teman-teman lihat pada gambar di atas ini, jika gambar sudah melakukan bounce di bawah terdapat button yang berfungsi untuk merefresh agar bounceIn dapat di jalankan ulang

Baik sekarang kita buat, seperti biasa siapkan text editornya kemudian copy script html nya di bawah ini

<html>
   <head>
    <title>BounceIn</title>
   </head>
   <body>
   
      <div id="animated-example" class="animated bounceIn"></div>
      <button onclick="myFunction()">Ulangi</button>
 
   </body>
</html>

Save dengan nama index.html, oke kita akan melanjutkan Cara Menggunakan Fungsi bounceIn Pada CSS berikutnya tambahkan style css nya di dalam tag <head>

<style>
         .animated { 
            background-image: url(dumet1.png);
            background-repeat: no-repeat;
            background-position: left top;
            padding-top:263px;
            margin-bottom:0px;
            -webkit-animation-duration: 10s;
            animation-duration: 10s; 
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both; 
         }
         
         @-webkit-keyframes bounceIn {
            0% {
               opacity: 0;
               -webkit-transform: scale(.3);
            }
            50% {
               opacity: 1;
               -webkit-transform: scale(1.05);
            }
            70% {
               -webkit-transform: scale(.9);
            }
            100% {
               -webkit-transform: scale(1);
            }
         }
         
         @keyframes bounceIn {
            0% {
               opacity: 0;
               transform: scale(.3);
            }
            50% {
               opacity: 1; 
               transform: scale(1.05);
            }
            70% {
               transform: scale(.9);
            }
            100% {
               transform: scale(1);
            }
         }
         
         .bounceIn {
            -webkit-animation-name: bounceIn; 
            animation-name: bounceIn;
         }
      </style>

Jika sudah, save dan jalankan pada browser nya. Maka gambar yang kita atur sudah berhasil diberikan fungsi bounceIn, langkah berikutnya tinggal kita berikan Javascript nya untuk menjalankan fungsi button agar ketika di klik bounceIn akan mengulang

     <script>
         function myFunction() {
            location.reload();
         }
      </script>

Tambahkan Javascript nya di dalam text editornya, jika sudah refresh pada browser nya. Maka bounce dan button sudah terintegrasi dengan baik, simple tapi menarik bukan. Kalian juga bisa memodifikasinya sendiri supaya terlihat lebih menarik. Oke sekian dulu pada artikel kali ini tentang Cara Menggunakan Fungsi bounceIn Pada CSS kita jumpa lagi di artikel berikutnya. Sampai Jumpa dan Terima Kasih.

Semoga bermanfaat 🙂

Cara Menggunakan Fungsi bounceIn Pada CSS

Kategori