butterfly-css/posts.html at main · AMR2010M/butterfly-css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>how to make wow css animation in butterfly css  _blog</title>
<meta name="description" content="make unique animation with one attribute and cdn with very easy syntax with butterfly css ">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-pink-50 text-gray-800">

  <!-- Header -->
  <header class="bg-pink-600 text-white py-6 shadow-md">
    <div class="max-w-5xl mx-auto px-4 flex justify-between items-center">
      <h1 class="text-2xl font-bold">🦋 Butterfly CSS Blog</h1>
      <a href="index.html" class="hover:underline text-white">← Back to Blog</a>
    </div>
  </header>

  <!-- Main Content -->
  <main class="max-w-5xl mx-auto px-4 py-10">

    <!-- Blog Title -->
    <h1 class="text-4xl font-extrabold text-pink-600 mb-6">🎨 Mastering Animations in Butterfly CSS</h1>
    <p class="text-gray-500 text-sm mb-8">Published on August 31, 2025</p>

    <p class="mb-6 text-lg">
      Animations make websites lively and engaging. With <strong>Butterfly CSS</strong>, you can create stunning effects effortlessly.
      This guide explores <a href="https://butterfly-css.netlify.app/docs#animations/" class="text-pink-600 underline">animations documentation</a> and examples, and links to the <a href="https://github.com/AMR2010M/butterfly-css/tree/main" class="text-pink-600 underline">GitHub repository</a>.
    </p>

    <!-- Standard Animations Section -->
    <section class="mb-10">
      <h2 class="text-3xl font-bold text-pink-500 mb-4">✨ Standard Animations</h2>
      <p class="mb-4">Continuous motion effects for lively UIs:</p>

      <ul class="list-disc list-inside space-y-2">
        <li><span class="text-pink-600">🔄 spin</span> – Rotates elements continuously.</li>
        <li><span class="text-pink-500">🦘 bounce</span> – Bounces vertically.</li>
        <li><span class="text-pink-400">💓 pulse</span> – Grows and fades in/out.</li>
        <li><span class="text-pink-300">🎯 swing</span> – Wobbles side to side.</li>
        <li><span class="text-pink-600">✨ fadein</span> – Fades in while sliding up.</li>
        <li><span class="text-pink-500">🔁 flip</span> – Flips horizontally.</li>
        <li><span class="text-pink-400">💥 shake</span> – Shakes horizontally.</li>
        <li><span class="text-pink-300">📈 grow</span> – Grows and shrinks continuously.</li>
        <li><span class="text-pink-600">📉 shrink</span> – Shrinks and grows continuously.</li>
        <li><span class="text-pink-500">↔️ slide-x</span> – Slides left and right.</li>
        <li><span class="text-pink-400">↕️ slide-y</span> – Slides up and down.</li>
      </ul>
    </section>

    <!-- Coloring Animations Section -->
    <section class="mb-10">
      <h2 class="text-3xl font-bold text-pink-500 mb-4">🌈 Coloring Animations</h2>
      <p class="mb-4">Animated background color changes that make elements pop:</p>

      <ul class="list-disc list-inside space-y-2">
        <li><span class="text-pink-600">🎨 coloring</span> – Generic background animation changing every second.</li>
        <li><span class="text-pink-500">🎨 coloring-1</span> – Unique 3-color animation.</li>
        <li><span class="text-pink-400">🎨 coloring-2</span> – Green → Yellow → Orange.</li>
        <li><span class="text-pink-300">🎨 coloring-3</span> – Red → Cyan → Light Purple.</li>
        <li>Continue through <span class="text-pink-600">coloring-4 to coloring-50</span> for more color combos.</li>
      </ul>
    </section>

    <!-- Floating Ball Animations Section -->
    <section class="mb-10">
      <h2 class="text-3xl font-bold text-pink-500 mb-4">🎈 Floating Ball Animations</h2>
      <p class="mb-4">Glowing balls floating across elements, creating dynamic visual effects:</p>

      <ul class="list-disc list-inside space-y-2">
        <li><span class="text-pink-600">💫 ball-move-1</span> – Glowing ball with specific path and speed.</li>
        <li><span class="text-pink-500">💫 ball-move-2</span> – Different trajectory and speed.</li>
        <li><span class="text-pink-400">💫 ball-move-3</span> – Larger glowing ball.</li>
        <li><span class="text-pink-300">💫 ball-move-4</span> – Smaller, faster-moving ball.</li>
        <li><span class="text-pink-600">💫 ball-move-5</span> – Big, slow-moving glowing ball.</li>
      </ul>
    </section>

    <!-- Special Effects Section -->
    <section class="mb-10">
      <h2 class="text-3xl font-bold text-pink-500 mb-4">🌟 Special Effects</h2>
      <p class="mb-4">Unique visual enhancements for extra flair:</p>

      <ul class="list-disc list-inside space-y-2">
        <li><span class="text-pink-600">🎉 birthday-paper</span> – Confetti falling animation.</li>
        <li><span class="text-pink-500">💡 lightfouce</span> – Spotlight effect to emphasize content.</li>
        <li><span class="text-pink-400">✏️ handdrawn</span> – Sketchy, hand-drawn look.</li>

        <li><span class="text-pink-600">💨 blur</span> – Soft blur effect for focus areas.</li>
      </ul>
    </section>

    <p class="mt-8 font-semibold text-pink-600 text-lg">
      Combine these attributes to create engaging, playful, and professional animations with Butterfly CSS.
      Check the <a href="https://butterfly-css.netlify.app/docs#animations/" class="underline">full docs</a> or visit the <a href="https://github.com/AMR2010M/butterfly-css/tree/main" class="underline">GitHub repo</a> to explore more!
    </p>

  </main>

  <!-- Footer -->
  <footer class="bg-pink-600 text-white py-6 mt-12 text-center">
    <p>© 2025 Butterfly CSS Blog. Built with ❤️c</p>
  </footer>
</body>
</html>