Animation car

best animation of car moving

This tailwind example is contributed by irahoza daniel, on 22-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Transitions

Animation

Author irahoza daniel

Tailwind v3.4 1.3k 6

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Car</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: linear-gradient(to right, #87CEEB, #E0F7FA);
            height: 100vh;
        }
        
        .road {
            position: absolute;
            bottom: 50px;
            width: 100%;
            height: 100px;
            background: #333;
        }
        
        .road::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 6px;
            background: repeating-linear-gradient(to right, white, white 30px, transparent 30px, transparent 60px);
            transform: translateY(-50%);
        }
        
        .car {
            position: absolute;
            bottom: 130px;
            left: -200px;
            width: 200px;
            height: 80px;
            animation: drive 8s linear infinite;
        }
        
        .car-body {
            position: relative;
            width: 100%;
            height: 100%;
            background: #FF4136;
            border-radius: 20px 20px 5px 5px;
        }
        
        .car-top {
            position: absolute;
            top: -30px;
            left: 20px;
            width: 80px;
            height: 40px;
            background: #FF4136;
            border-radius: 20px 20px 0 0;
        }
        
        .window {
            position: absolute;
            top: 5px;
            width: 70px;
            height: 25px;
            background: #7FDBFF;
            border-radius: 15px 15px 0 0;
        }
        
        .front-window {
            left: 5px;
        }
        
        .back-window {
            right: 5px;
        }
        
        .wheel {
            position: absolute;
            bottom: -15px;
            width: 40px;
            height: 40px;
            background: #111;
            border-radius: 50%;
            border: 3px solid #444;
        }
        
        .wheel::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 15px;
            height: 15px;
            background: #888;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }
        
        .front-wheel {
            right: 20px;
            animation: spin 1s linear infinite;
        }
        
        .back-wheel {
            left: 20px;
            animation: spin 1s linear infinite;
        }
        
        .light {
            position: absolute;
            width: 10px;
            height: 5px;
            background: #FFDC00;
            border-radius: 5px 5px 0 0;
        }
        
        .front-light {
            right: 0;
            top: 15px;
        }
        
        .back-light {
            left: 0;
            bottom: 15px;
            background: #FF4136;
        }
        
        @keyframes drive {
            0% { transform: translateX(-200px); }
            100% { transform: translateX(calc(100vw + 200px)); }
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .cloud {
            position: absolute;
            background: white;
            border-radius: 50%;
            opacity: 0.8;
            animation: moveCloud linear infinite;
        }
        
        .cloud1 {
            width: 80px;
            height: 40px;
            top: 50px;
            left: 10%;
            animation-duration: 30s;
        }
        
        .cloud2 {
            width: 120px;
            height: 60px;
            top: 80px;
            left: 40%;
            animation-duration: 40s;
        }
        
        .cloud3 {
            width: 100px;
            height: 50px;
            top: 30px;
            left: 70%;
            animation-duration: 35s;
        }
        
        @keyframes moveCloud {
            0% { transform: translateX(100vw); }
            100% { transform: translateX(-200px); }
        }
    </style>
</head>
<body>
    <div class="road"></div>
    
    <div class="cloud cloud1"></div>
    <div class="cloud cloud2"></div>
    <div class="cloud cloud3"></div>
    
    <div class="car">
        <div class="car-body">
            <div class="car-top">
                <div class="window front-window"></div>
                <div class="window back-window"></div>
            </div>
            <div class="wheel front-wheel"></div>
            <div class="wheel back-wheel"></div>
            <div class="light front-light"></div>
            <div class="light back-light"></div>
        </div>
    </div>
</body>
</html>

Related Examples

Card animate

Raul antonio de la cruz hernandez

1 year ago

1.6k
Simple Btn animation

Ranit Saha

1 year ago

2.3k
Responsive 3D Car Delivery Animation Tutorial
Responsive 3D Car Delivery Animation Tutorial

Bonimater

1 year ago

1k
Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

sachin senal

1 year ago

1.8k
Swipe card fully animative
@sufyandevs #sufyandevs #sufyandev #shanwebdev

Sufyan jutt

10 months ago

1.7k
Gaming UI Card, Form
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Ayyamperumal S

8 months ago

613
E-Commerce Delivery Truck Animation
This responsive CSS animation showcases a delivery bus transporting a package to its destination, created entirely with Tailwind CSS and pure HTML. The animation features

Bonimater

1 year ago

1.5k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Samuel Dawson

3 years ago

22k
background animation
background animation

Anonymous

3 years ago

53k
Auto-Flipping 3D Profile Card with Tailwind CSS
This project showcases a 3D auto-flipping profile card built with HTML, Tailwind CSS, and vanilla JavaScript. The front side displays the user’s photo, name, and role, while the back side reveals contact information. The card flips automatically every few seconds to add a dynamic, engaging feel—perfect for portfolios or personal websites.

irahoza daniel

1 year ago

1.6k
Canlı Yayın Butonu
Pulse efekt içeren canlı yayın butonu.

Sedat Kumcu

1 year ago

2.4k
Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.5k