Cara Membuat Efek Animasi MoveInLeft, MoveInRight, dan FloatingFox Menggunakan CSS

Tipsim.com - Cara membuat efek animasi MoveInLeft, MoveInRight, dan FloatingFox menggunakan CSS. Halo sob, pada postingan saya kali ini saya akan membagikan tutorial bagaimana cara membuat efek animasi yang keren menggunakan CSS.

Efek yang saya buat ini sederhana dan ringan sob, karena hanya menggunakan HTML dan CSS yang tidak terlalu panjang. Bagaimana cara kerjanya efek ini? Silahkan simak sampai bawah sob.

Akan saya jelaskan sedikit mengenai efek MoveInLeft, MoveInRight, dan FloatingFox.

• MoveInLeft : Akan menampilkan object secara perlahan dari sisi kiri menuju tempat aslinya. Misal, jika sebelumnya anda membuat objek yang diletakkan di tengah layar, kemudian anda memasukkan efek MoveInLeft, maka ketika halaman itu di refresh akan memberikan efek animasi dimana objek tersebut muncul dari sisi kiri menuju ke tengah secara perlahan.
• MoveInRight :  Efek ini kebalikannya dari MoveInLeft. Yaitu memberikan efek dimana objek tersebut akan muncul dari sisi kiri menuju ke tempat asalnya secara perlahan.
• FloatingFox : Efek ini akan membuat suatu objek bergerak sendiri ke atas dan ke bawah secara perlahan.

Pada tutorial yang saya bagikan ini, saya membagikan kode efek animasi dengan pergerakan yang normal, tidak terlalu cepat dan tidak terlalu lambat. Simak langkah-langkah pemasangannya di bawah ini.

Cara Membuat Efek Animasi MoveInLeft, MoveInRight, dan FloatingFox Menggunakan CSS

# Yang pertama, silahkan anda copy kode CSS berikut ini dan pastekan di atas kode </head> di Edit Template blog anda.

<style>
.TIMmoveleft {animation: moveInLeft 1s ease-out;}
.TIMmoveright {animation: moveInRight 1s ease-out, floatingFox 4s 1s infinite;}

@keyframes moveInLeft {
  0% {opacity: 0;transform: translate(-150px);}
  100% {opacity: 1;transform: translate(0px);}
}

@keyframes moveInRight {
  0% {opacity: 0;transform: translate(150px);}
  100% {opacity: 1;transform: translate(0px);}
}

@keyframes floatingFox {
  0% {transform: translate(0px);}
  50% {transform: translateY(5px);}
  100% {transform: translate(0px);}
}
</style>

# Kemudian anda tinggal memanggil kode CSS di atas dengan panggilan class.
Misal, anda ingin memberikan efek tersebut pada bagian header atau judul blog, dan kode header atau judul blog anda kurang lebih seperti ini.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='TipsIM (Header)' type='Header' version='1'>...</b:widget>
</b:section>

Maka anda tinggal menyisipkan kode pemanggil di dalam class header. Untuk lebih jelasnya, berikut ini hasil pemasangan kode pemanggil CSS efek pada kode header di atas.

<b:section class='header TIMmoveleft' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='TipsIM (Header)' type='Header' version='1'>...</b:widget>
</b:section>

Kode yang di blok berwarna hijau merupakan kode pemanggil CSS efek MoveInLeft. Sama halnya dengan yang MoveInRight. Anda tinggal menyisipkan kode pemanggil pada HTML objek yang ingin anda beri efek tersebut.

Anda bisa melihat contoh DEMO di bawah ini.

• Result

Demikian postingan blog TipsIM mengenai efek animasi moveinleft, moveinright, dan floatingfox. Semoga postingan yang saya bagikan ini bisa bermanfaat. Terima kasih telah meluangkan waktunya untuk berkunjung dan membaca.

Salam Blogger.

Baca juga:

9 Most Expensive Cars Made In The United States