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

520

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