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

611

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

Responsive Projects Section

Author:
ariaw

9 months ago

1k
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.

Author:
irahoza daniel

7 months ago

763
Loading dots
Black Loading dots

Author:
Никита (Whiso)

1 year ago

1.9k
Animated cards

Author:
Michael Andreuzza

1 year ago

6.9k
Loading Spinner Component - Animated Circle Loader
Loading spinner component featuring a smooth animated circle loader with dashed border animation. Perfect for website loading states, content loading indicators, and improving user experience during page transitions. Easy to implement and customize for any project.

Author:
Homayoun

3 months ago

626
Button with Bouncing Animation

Author:
Prashant

3 years ago

14.4k
Moving Background Animation

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

1 year ago

3.2k
Expandable Card
An expandable card using tailwind + alpine to show additional information when it is open

Author:
farid

3 months ago

294
background animation
background animation

Author:
Anonymous

2 months ago

81
Loading dots
Black Loading dots

Author:
Anonymous

2 years ago

39.2k
Pixel Blast
Pixel Blast

Author:
Raul antonio de la cruz hernandez

3 months ago

682
Animated Profile Card
Animated profile card with profile completion circle

Author:
Shivam Vishwakarma

1 year ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components