Animasi Mobil & Motor Berjalan dengan CSS
28/11/2019 Risman Hakim 646 Website
Animasi Mobil & Motor Berjalan dengan CSS - Setelah pada pembahasan sebelumnya dibahas tentang animasi CSS yakni Animasi CSS dengan @keyframes dan animation-iteration-count, pada kesempatan kali ini saya akan bagikan tutorial sederhana animasi dari CSS dimana didalamnya akan menggunakan properti animasi dan @keyframes.
Idenya nanti adalah membuat animasi pada objek gambar mobil dan motor seperti terlihat berjalan dijalan raya, penasaran seperti apa cara membuatnya ? yuk, ikuti langkah - langkahnya berikut ini.
Sebelum membuat animasi silahkan kalian bisa bahan - bahannya dibawah ini.
Mobil
Motor
Jalan
Setelah bahan - bahan diatas telah sudah disiapkan, langkah selanjutnya buatlah satu file index.html untuk membuat kerangka dan meload gambar sebagai animasinya.
<img src="car.png" class="car">
<img src="motor.png" class="motor">
<img src="scane1-jalan.png" class="road">
</body>
Setelah sintak HTML telah diketikan, langkah selanjutnya adalah membuat file CSS yaitu style.css untuk membuat animasi pada objek gambar mobil dan motor agar bergerak, animasinya kita akan buat dengan memanfaatkan properti dan animasi yang terdapat di CSS. Silahkan ketikan sintak CSS untuk membuat animasinya berikut ini.
img.road {
width: 100%;
position: relative;
top: -105px;
}
img.car {
width: 120px;
z-index: 1;
top: 95px;
position: relative;
animation-name: moveCar;
animation-iteration-count: infinite;
animation-duration: 13s;
animation-timing-function: linear;
animation-delay: 1s;
}
img.motor {
width: 60px;
z-index: 2;
top: 112px;
position: relative;
animation-name: moveMotor;
animation-iteration-count: infinite;
animation-duration: 13s;
animation-timing-function: linear;
animation-delay: 1s;
}
@keyframes moveCar {
from {left: -150px}
to {left: 100%;}
}
@keyframes moveMotor {
from {left: 100%;}
to {left: -150px;}
}
Selanjutnya, jangan lupa di load atau disambungkan terlebih dahulu file index.html dengan file style.css nya. Kemudian silahkan jalankan pada browser masing - masing untuk melihat hasil akhirnya.
Bagaiaman, menarik bukan ? dengan hanya memanfaatkan animasi dari CSS kita sudah bisa membuat animasi sederhana pada sebuah objek seperti diatas. Baiklah, cukup sekian tutorial Animasi Mobil & Motor Berjalan dengan CSS semoga bermanfaat dan selamat mencoba.
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
