Hallo sahabat Dumet, pada tulisan kali ini saya akan meberikan tutorial membuat animasi pesawat terbang dengan hanya menggunakan CSS3. Akan tetapi kita tidak menggunakan animasi @keyframe, cukup dengan property transform saja. Baiklah kita langsung mulai saja, silahkan sahabat ikuti langkah-langkahnya sebagai berikut.

Step1

Persiapkan sebuah gambar untuk dijadikan background dan objek. Misal saya gunakan gambar seperti di bawah ini.

Membuat Animasi Pesawat Terbang Dengan CSS3

Membuat Animasi Pesawat Terbang Dengan CSS3

Step2

Buatlah file .html dan ketikkan script dibawah ini.

Membuat Animasi Pesawat Terbang Dengan CSS3

Step3

Kemudian buatlah file .css dan ketikan script seperti di bawah ini.

Membuat Animasi Pesawat Terbang Dengan CSS3

Setelah selesai, silahkan jalankan file .html nya pada browser, dan letakkan kursor disekitar background. Maka pesawat akan terbang ke atas. Ketika kursor di jauhkan dari background maka pesawat akan turun kembali ke tempat semula.

Okay, sampai disini dulu ya sahabat. Selamat belajar dan sampai jumpa pada tulisan saya selanjutnya. J