Back to Discover

Tailwind CSS Fade in and Slide Animations

Amelia

Created Nov 03, 2025

0 views

0 likes

0 comments

0 forks

Export Fork Like

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<body class="bg-gray-50 min-h-screen p-8">
  <div class="max-w-4xl mx-auto space-y-8" x-data="{ 
                                                   showLeft: false, 
                                                   showRight: false, 
                                                   showUp: false, 
                                                   showDown: false,
                                                   showCards: false 
                                                   }">

    <!-- Header -->
    <div class="text-center mb-12">
      <h1 class="text-4xl font-bold text-gray-900 mb-4">Fade In & Slide Animations</h1>
      <p class="text-gray-600">Click buttons to trigger different animation directions</p>
    </div>

    <!-- Control Buttons -->
    <div class="flex flex-wrap gap-4 justify-center mb-12">
      <button @click="showLeft = !showLeft" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center gap-2">
        <ion-icon name="arrow-forward-outline"></ion-icon>
        Slide From Left
      </button>
      <button @click="showRight = !showRight" class="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center gap-2">
        <ion-icon name="arrow-back-outline"></ion-icon>
        Slide From Right
      </button>
      <button @click="showUp = !showUp" class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center gap-2">
        <ion-icon name="arrow-down-outline"></ion-icon>
        Slide From Bottom
      </button>
      <button @click="showDown = !showDown" class="px-6 py-3 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition flex items-center gap-2">
        <ion-icon name="arrow-up-outline"></ion-icon>
        Slide From Top
      </button>
    </div>

    <!-- Animation Examples -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

      <!-- Slide from Left -->
      <div class="bg-white rounded-lg shadow-lg p-8 min-h-[200px] flex items-center justify-center">
        <div x-show="showLeft" 
             x-transition:enter="transition ease-out duration-500"
             x-transition:enter-start="opacity-0 -translate-x-12"
             x-transition:enter-end="opacity-100 translate-x-0"
             x-transition:leave="transition ease-in duration-300"
             x-transition:leave-start="opacity-100 translate-x-0"
             x-transition:leave-end="opacity-0 -translate-x-12"
             x-cloak
             class="text-center">
          <ion-icon name="arrow-forward-circle" class="text-6xl text-blue-600 mb-4"></ion-icon>
          <h3 class="text-xl font-semibold text-gray-900">Slide Left</h3>
          <p class="text-gray-600 mt-2">Fades in from the left</p>
        </div>
      </div>

      <!-- Slide from Right -->
      <div class="bg-white rounded-lg shadow-lg p-8 min-h-[200px] flex items-center justify-center">
        <div x-show="showRight" 
             x-transition:enter="transition ease-out duration-500"
             x-transition:enter-start="opacity-0 translate-x-12"
             x-transition:enter-end="opacity-100 translate-x-0"
             x-transition:leave="transition ease-in duration-300"
             x-transition:leave-start="opacity-100 translate-x-0"
             x-transition:leave-end="opacity-0 translate-x-12"
             x-cloak
             class="text-center">
          <ion-icon name="arrow-back-circle" class="text-6xl text-purple-600 mb-4"></ion-icon>
          <h3 class="text-xl font-semibold text-gray-900">Slide Right</h3>
          <p class="text-gray-600 mt-2">Fades in from the right</p>
        </div>
      </div>

      <!-- Slide from Bottom -->
      <div class="bg-white rounded-lg shadow-lg p-8 min-h-[200px] flex items-center justify-center">
        <div x-show="showUp" 
             x-transition:enter="transition ease-out duration-500"
             x-transition:enter-start="opacity-0 translate-y-12"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-300"
             x-transition:leave-start="opacity-100 translate-y-0"
             x-transition:leave-end="opacity-0 translate-y-12"
             x-cloak
             class="text-center">
          <ion-icon name="arrow-down-circle" class="text-6xl text-green-600 mb-4"></ion-icon>
          <h3 class="text-xl font-semibold text-gray-900">Slide Up</h3>
          <p class="text-gray-600 mt-2">Fades in from the bottom</p>
        </div>
      </div>

      <!-- Slide from Top -->
      <div class="bg-white rounded-lg shadow-lg p-8 min-h-[200px] flex items-center justify-center">
        <div x-show="showDown" 
             x-transition:enter="transition ease-out duration-500"
             x-transition:enter-start="opacity-0 -translate-y-12"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-300"
             x-transition:leave-start="opacity-100 translate-y-0"
             x-transition:leave-end="opacity-0 -translate-y-12"
             x-cloak
             class="text-center">
          <ion-icon name="arrow-up-circle" class="text-6xl text-orange-600 mb-4"></ion-icon>
          <h3 class="text-xl font-semibold text-gray-900">Slide Down</h3>
          <p class="text-gray-600 mt-2">Fades in from the top</p>
        </div>
      </div>
    </div>

    <!-- Sequential Card Animation -->
    <div class="mt-16">
      <button @click="showCards = !showCards" class="mx-auto block px-8 py-4 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition font-semibold">
        <span x-text="showCards ? 'Hide Cards' : 'Show Sequential Cards'"></span>
      </button>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
        <div x-show="showCards" 
             x-transition:enter="transition ease-out duration-500 delay-[0ms]"
             x-transition:enter-start="opacity-0 translate-y-8"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-cloak
             class="bg-white rounded-lg shadow-lg p-6">
          <ion-icon name="rocket-outline" class="text-5xl text-indigo-600 mb-3"></ion-icon>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Fast</h3>
          <p class="text-gray-600">Lightning-fast performance for modern applications</p>
        </div>

        <div x-show="showCards" 
             x-transition:enter="transition ease-out duration-500 delay-[100ms]"
             x-transition:enter-start="opacity-0 translate-y-8"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-cloak
             class="bg-white rounded-lg shadow-lg p-6">
          <ion-icon name="shield-checkmark-outline" class="text-5xl text-indigo-600 mb-3"></ion-icon>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Secure</h3>
          <p class="text-gray-600">Built with security best practices in mind</p>
        </div>

        <div x-show="showCards" 
             x-transition:enter="transition ease-out duration-500 delay-[200ms]"
             x-transition:enter-start="opacity-0 translate-y-8"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-cloak
             class="bg-white rounded-lg shadow-lg p-6">
          <ion-icon name="layers-outline" class="text-5xl text-indigo-600 mb-3"></ion-icon>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Scalable</h3>
          <p class="text-gray-600">Grows with your business needs effortlessly</p>
        </div>
      </div>
    </div>

  </div>

  [x-cloak] { display: none !important; }

Comments (0)

No comments yet. Be the first!