Animasi Mobil & Motor Berjalan dengan CSS

28/11/2019    Risman Hakim    118     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

Animasi Mobil & Motor Berjalan dengan CSS

Motor

Animasi Mobil & Motor Berjalan dengan CSS

Jalan

Animasi Mobil & Motor Berjalan dengan CSS

Setelah bahan - bahan diatas telah sudah disiapkan, langkah selanjutnya buatlah satu file index.html untuk membuat kerangka dan meload gambar sebagai animasinya.

<body>
    <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.

* {padding: 0; margin: 0}
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.

Web Design, HTML CSS

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