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

636

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

Ripple Animation

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

11 months ago

2.1k
3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

8.9k
Responsive Projects Section

Author:
ariaw

11 months ago

1k
3D Box

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

1 year ago

5.7k
E-Commerce Delivery Truck Animation
This responsive CSS animation showcases a delivery bus transporting a package to its destination, created entirely with Tailwind CSS and pure HTML. The animation features

Author:
Bonimater

9 months ago

1k
Animated Coming Soon Page 3

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

1 year ago

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

Author:
Michael Andreuzza

1 year ago

3.4k
Botton hover
On hover Changes text

Author:
davilaarroyo07

2 years ago

7.1k
Button with hover effect
Button with light hover effect, responsive and suitable for light/dark mode.

Author:
isaSxm

6 months ago

429
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Author:
Abdul Baset Bappy

11 months ago

1.9k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

1 year ago

2.1k
car delivary
car delivary

Author:
bonheur dev

9 months ago

810

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components