Home
irahoza daniel
Animation car

Animation car

best animation of car moving

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

Animation

Author irahoza daniel

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

ForK blocks animations
ForK blocks animations

Author:
Yor Rodriguez

4 months ago

1k
Onhover underline effect

Author:
Dika Rahman

1 year ago

2.8k
3D product Card
The product card has been fully recoded using a light (black-and-white) color theme. Let me know if you want to add more interactivity, change the layout, or adapt it for mobile or dark mode.

Author:
Nicole Shalom

1 week ago

22
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

39.2k
change background color on scroll with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.6k
Marquee animation with tailwind css

Author:
Anonymous

10 months ago

5.2k
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Author:
Bonimater

1 week ago

51
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

3 months ago

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

Author:
Sedat Kumcu

6 months ago

929
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

4 months ago

1.2k
gradient bg
coolness

Author:
Mango_ 5953

1 week ago

9
Journey Through the Solar System 🚀
Embark on a stunning animated voyage across our solar system. Watch as your spaceship glides past the Sun, planets, and distant Pluto — all brought to life with simple, clean Tailwind CSS. A fun and educational journey through the cosmos!

Author:
Bonimater

6 days ago

7

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components