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

830

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

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

Author:
Anonymous

2 years ago

13.5k
Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

Author:
shrenik khule

3 weeks ago

60
HOT DOGS WEB SITE
it combine the hot dogs delivary

Author:
bonheur dev

9 months ago

598
Loading dots
Black Loading dots

Author:
Anonymous

2 years ago

39.5k
Animated button
on hover underline will go from left to right

Author:
Anonymous

1 year ago

5.3k
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

9 months ago

1.2k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.6k
Ripple Animation

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

2.1k
Fireflies
Fireflies in the night sky. Based on anonymous/background-animation-2

Author:
Nick Girga

10 months ago

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

Author:
Samuel Dawson

2 years ago

21.3k
Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Author:
Homayoun

3 months ago

590
background animation
background animation

Author:
Anonymous

2 years ago

50.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components