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

210

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

Dynamic Service Showcase with Interactive Flip Cards
This component presents a visually engaging service section featuring interactive flip cards. Each service card displays an image on the front and reveals details on the back when hovered over. The layout is responsive, ensuring seamless adaptability across various screen sizes. The hover effect adds a modern and engaging touch, enhancing user interaction.

Author:
Vikas Kushwah

3 months ago

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

Author:
Nick Girga

2 months ago

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

Author:
sachin senal

5 months ago

770
Ripple Animation

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

3 months ago

918
car delivary
car delivary

Author:
Bonimater

3 weeks ago

29
Creative Hero Section

Author:
Ijila Itunu

2 months ago

478
Elevated Buton
On hover merge shadow

Author:
Anonymous

9 months ago

1.6k
gradient bg
coolness

Author:
Mango_ 5953

1 month ago

19
3D Box

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

1 year ago

4.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 month ago

116
Animated Info Card
Animated info card

Author:
Shivam Vishwakarma

5 months ago

998
Loading dots
Black Loading dots

Author:
Anonymous

1 year ago

36.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components