Home
Bonimater
Responsive 3D Car Delivery Animation Tutorial

Responsive 3D Car Delivery Animation Tutorial

This tailwind example is contributed by Bonimater, on 09-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Transitions

Animation

Author Bonimater

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome Delivery Animation</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style type="text/tailwindcss">
        @layer utilities {
            .animate-truck-arrival {
                animation: truckArrival 3s ease-out forwards;
            }
            .animate-package-delivery {
                animation: packageDelivery 2s ease-in-out 2.5s forwards;
            }
            .animate-welcome-text {
                animation: welcomeText 1.5s ease-out 4s forwards;
                opacity: 0;
            }
            .animate-fade-in {
                animation: fadeIn 1s ease-out 5s forwards;
                opacity: 0;
            }
            
            @keyframes truckArrival {
                0% { transform: translateX(-100vw) rotateY(0deg); }
                70% { transform: translateX(10%) rotateY(0deg); }
                80% { transform: translateX(0%) rotateY(-15deg); }
                90% { transform: translateX(0%) rotateY(5deg); }
                100% { transform: translateX(0%) rotateY(0deg); }
            }
            @keyframes packageDelivery {
                0% { transform: translateY(0) scale(1); }
                30% { transform: translateY(-100px) scale(1.1); }
                70% { transform: translateY(-100px) scale(1.1); }
                100% { transform: translateY(0) scale(1); }
            }
            @keyframes welcomeText {
                0% { transform: scale(0.5); opacity: 0; }
                80% { transform: scale(1.1); opacity: 1; }
                100% { transform: scale(1); opacity: 1; }
            }
            @keyframes fadeIn {
                0% { opacity: 0; }
                100% { opacity: 1; }
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center p-4 overflow-hidden">
    
    <div class="relative w-full max-w-2xl h-96 mb-12">
        
        <div class="absolute bottom-0 left-0 right-0 h-16 bg-gray-800 rounded-t-xl"></div>
        <div class="absolute bottom-16 left-0 right-0 h-1 bg-yellow-300"></div>
        
        
        <div class="absolute bottom-24 left-0 w-48 h-24 animate-truck-arrival">
            
            <div class="absolute left-0 w-20 h-20 bg-blue-600 rounded-lg">
                
                <div class="absolute top-2 left-2 right-2 h-10 bg-blue-300 rounded-sm"></div>
                
                <div class="absolute bottom-2 right-2 w-4 h-3 bg-yellow-300 rounded-full"></div>
                
                <div class="absolute top-4 left-18 w-2 h-4 bg-blue-700 rounded-sm"></div>
            </div>
            
            <div class="absolute left-20 w-24 h-16 bg-blue-500 rounded-lg">
                
                <div class="absolute bottom-0 left-4 w-8 h-8 bg-gray-800 rounded-full border-2 border-gray-600"></div>
                <div class="absolute bottom-0 right-4 w-8 h-8 bg-gray-800 rounded-full border-2 border-gray-600"></div>
            </div>
        </div>
        
        
        <div class="absolute bottom-48 left-1/2 transform -translate-x-1/2 w-20 h-12 bg-orange-500 rounded-lg flex items-center justify-center animate-package-delivery opacity-0">
            <div class="w-full h-1 bg-orange-600"></div>
            <div class="absolute text-white text-xs font-bold">YOUR ORDER</div>
        </div>
        
        
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center animate-welcome-text">
            <h1 class="text-4xl md:text-5xl font-bold text-blue-600 mb-2">Welcome!</h1>
            <p class="text-xl text-gray-700">Your delivery system is ready</p>
        </div>
    </div>
    
    
    <div class="animate-fade-in text-center max-w-md">
        <h2 class="text-2xl font-semibold text-gray-800 mb-4">Get started with our delivery services</h2>
        <p class="text-gray-600 mb-6">Track packages, schedule deliveries, and manage your account with our easy-to-use system.</p>
        <div class="flex justify-center gap-4">
            <button class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition transform hover:scale-105">
                Track a Package
            </button>
            <button class="px-6 py-3 bg-white hover:bg-gray-100 text-blue-600 border border-blue-600 rounded-lg transition transform hover:scale-105">
                Schedule Delivery
            </button>
        </div>
    </div>
    
    <script>
        // Restart animation when clicking the buttons for demo purposes
        document.querySelectorAll('button').forEach(button => {
            button.addEventListener('click', () => {
                location.reload();
            });
        });
    </script>
</body>
</html>

Related Examples

Animated Coming Soon Page 3

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

6 months ago

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

Author:
Michael Andreuzza

1 year ago

2.6k
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Author:
Nick Girga

1 month ago

244
Animated button
on hover underline will go from left to right

Author:
Anonymous

1 year ago

3.9k
Text Animation

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

2 months ago

531
3D Box

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

1 year ago

4.8k
3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

7.3k
Modern page
hero page by salvator

Author:
Baraka Salvator

3 weeks ago

336
Elevated Buton
On hover merge shadow

Author:
Anonymous

9 months ago

1.5k
Bug Beach Day Heatwave
This playful animation brings sweltering summer insects to life with pure HTML and Tailwind CSS. Watch as: 🔥 Glowing Fireflies pulse with heat-radiant light, their wings shimmering in the desert sun 🐞 Overheated Ladybugs scuttle across cracked earth, their red shells reflecting the blazing heat ☀️ A Wobbling Sun dominates the sky, emitting pulsing heat waves across the animated landscape

Author:
Bonimater

2 weeks ago

21
Plug and Play Animated Button for Hero Statements / Landing Pages
REMOVE the bg-black from the outside <button/> div, if you are already using a black background. Besides this, the button is plug and play! Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Author:
Coastal UI

7 months ago

1.3k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components