Adding Complex Animations with @keyframes
For more complex animations that can’t be achieved with Tailwind’s built-in utilities, you can use custom CSS with Tailwind’s @apply directive to keep your styling consistent.
Example: HTML and Custom CSS Code
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Animated Card Layout in Tailwind CSS</title> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> <style> @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.5s ease-out forwards; } </style> </head> <body class="p-4"> <div class="bg-gray-200 flex justify-center items-center h-screen"> <div class="w-64 h-80 bg-white rounded-lg shadow-lg overflow-hidden fade-in-up"> <img class="w-full h-48 object-cover" src= "https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="Card Image"> <div class="p-4"> <h3 class="text-lg font-semibold"> Animated Card </h3> <p class="text-gray-600"> This card uses custom @keyframes for animation. </p> </div> </div> </div> </body> </html> |
Output
How to Create Animated Card Layout in Tailwind CSS ?
Creating animated card layouts can significantly enhance the user experience of a website, making it more interactive and engaging. Tailwind CSS, known for its utility-first approach, enables developers to build sophisticated animations without leaving the HTML markup. This article will guide you through creating an animated card layout using Tailwind CSS, covering all possible approaches with complete HTML code examples.