Cara Membuat Animasi Berputar Dengan CSS Animations

CSS atau yang sering kita dengan singkatan dari Cascading Style Sheets adalah rangkaian instruksi yang menentukan bagaiamana suatu text akan tertampil di halaman web. Dengan menggunakan fungsi CSS ini kita dapat merancang, merubah, mendisain, membentuk halaman website. Kita semua tahu kalau isi dari halaman website adalah tag-tag html, maka dengan memanfaatkan CSS kita dapat merubah tag-tag html sehingga menjadi lebih fungsional dan menarik.

Lalu apa itu CSS Animations? CSS Animations adalah modul yang diusulkan untuk CSS yang memungkinkan kita membuat sebuah animasi dari elemen dokumen HTML dengan menggunakan fungsi dari CSS itu sendiri

Dengan menambahkan CSS Animations ini kita dapat menghias halaman situs kita lebih menarik. Banyak sekali animasi animasi yang dapat kita buat dari CSS ini, salah satunya Animasi berputar. Kamu dapat lihat sendiri demonya. Lalu bagaimana membuat animasi berputar seperti demo tersebut? Berikut adalah cara pembuatannya.

Membuat Animasi Berputar Dengan CSS Animations
1. Tempatkan kode CSS berikut pada bidang CSS

.box-animations {
      background-color : #000000; 
      width : 75px; 
      height : 75px; 
      margin  :50px 0 0 0; 
      -moz-animation : animaputar 2s infinite linear; 
      -webkit-animation : animaputar 2s infinite linear;
} 
@-moz-keyframes animaputar {
      0% {-moz-transform:rotate(0deg);} 
      100% {-moz-transform:rotate(-360deg);} 
} 
@-webkit-keyframes animaputar {
      0% {-webkit-transform:rotate(0deg);} 
      100%{-webkit-transform:rotate(-360deg);} 
}

Sedikit Penjelasan Beberapa Fungsi CSS Diatas :

background-color : Untuk warna latar belakang. Disini saya atur ke hitam dengan kode warna : #000000

width : Untuk lebar ukuran. Disini saya atur ke 75 pixel yang ditulis : 75px

height : Untuk tinggi ukuran. Disini saya atur ke 75 pixel yang ditulis : 75px

margin : Untuk baris tepi. Disini saya atur atas 50 pixel, kanan 0, kiri 0, bawah 0.

-moz-animation : Untuk memanggil animasi (Firefox)

-webkit-animation : Untuk memanggil animasi (Chrome, Safari & Opera)

@-moz-keyframes : Aturan menentukan kode animasi. (Firefox)

@-webkit-keyframes : Aturan menentukan kode animasi. (Chrome, Safari & Opera)

Untuk mengatur kecepatan putaran animasi. Kamu dapat mengubahnya dengan mengganti pada kode animaputar 2s infinite linear (Angka yang saya warnai)

2. Kemudian tempatkan kode HTML berikut pada bidang HTML

<div class='box-animations'/>

3. Simpan dan sekarang coba kamu lihat

Dan jika kamu ingin menempatkan CSS Animasi berputar ini di blogger. Caranya kamu masuk ke dalam Editor Template di blogger, tempatkan kode CSS diatas sebelum kode ]]></b:skin> dan tempatkan kode HTML nya di antara kode <body> (dibawahnya) atau </body> (diatasnya). Dan jangan lupa simpan perubahan tersebut.

Itulah tutorial cara membuat animasi berputar pada HTML dengan CSS Animations. Untuk selebihnya dapat sobat kembangkan sendiri dan jangan lupa subscribe ya untuk tutorial-tutorial menarik lainnya dari Brotutor melalui Email atau media sosial milikmu.

Cara Membuat Animasi Berputar Dengan CSS Animations

Berbagi Pos

Postingan Terkait

Terpopuler Minggu Ini