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

343

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

background animation
background animation

Author:
Jayendra Madara

1 year ago

2.7k
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

8 months ago

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

Author:
Anonymous

1 year ago

12.5k
Creative Hero Section

Author:
Ijila Itunu

3 months ago

693
Animated cards

Author:
Prajwal Hallale

3 years ago

27.6k
Animated Profile Card
Animated profile card with profile completion circle

Author:
Shivam Vishwakarma

6 months ago

1k
Button
Button When Hover and page Reload then Button text will show the animation

Author:
Chitranshu

11 months ago

2k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

6 months ago

1.5k
Card animate

Author:
Raul antonio de la cruz hernandez

6 months ago

718
HOT DOGS WEB SITE
it combine the hot dogs delivary

Author:
bonheur dev

2 months ago

87
3D Box

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

1 year ago

5.1k
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

40.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components