Animasi Mobil & Motor Berjalan dengan CSS

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.

28 November 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat