CSS দিয়ে Pulse (স্পন্দন) অ্যানিমেশন ইফেক্ট তৈরি করা

ওভারভিউ

Pulse অ্যানিমেশন একটি এলিমেন্টকে কালানুক্রমিকভাবে বড় এবং ছোট করে (স্কেল আপ/ডাউন) একটি স্পন্দন বা হৃদস্পন্দনের মতো ইফেক্ট তৈরি করে। এটি CSS @keyframes এবং transform: scale() ব্যবহার করে তৈরি করা হয়।

কোড উদাহরণ

<html>
<head>
<style>
    .animated {
        background-image: url(/css/images/logo.png);
        background-repeat: no-repeat;
        background-position: left top;
        padding-top: 95px;
        margin-bottom: 60px;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    
    @-webkit-keyframes pulse {
        0% { -webkit-transform: scale(1); }
        50% { -webkit-transform: scale(1.1); }
        100% { -webkit-transform: scale(1); }
    }
    
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
    
    .pulse {
        -webkit-animation-name: pulse;
        animation-name: pulse;
    }
</style>
</head>
<body>
    <div id="animated-example" class="animated pulse"></div>
    <button onclick="myFunction()">Reload page</button>
    <script>
        function myFunction() { location.reload(); }
    </script>
</body>
</html>

কোড ব্যাখ্যা

আধুনিক উন্নত সংস্করণ

<!DOCTYPE html>
<html>
<head>
<style>
    .pulse-btn {
        width: 80px; height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
        border: none; color: white; font-size: 18px; font-weight: bold;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(238, 90, 90, 0.4);
        animation: pulse 2s ease-in-out infinite;
    }
    
    .pulse-btn:hover { animation-play-state: paused; }
    
    @keyframes pulse {
        0%, 100% { 
            transform: scale(1); 
            box-shadow: 0 4px 15px rgba(238, 90, 90, 0.4);
        }
        50% { 
            transform: scale(1.1); 
            box-shadow: 0 8px 25px rgba(238, 90, 90, 0.6);
        }
    }
    
    /* Subtle Pulse (Ring) */
    .pulse-ring {
        width: 60px; height: 60px;
        border: 3px solid #667eea;
        border-radius: 50%;
        animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    
    @keyframes pulse-ring {
        0% { transform: scale(0.8); opacity: 0.8; }
        100% { transform: scale(1.5); opacity: 0; }
    }
    
    /* Heartbeat (CSS-only) */
    .heartbeat {
        animation: heartbeat 1.5s ease-in-out infinite;
        transform-origin: center;
    }
    @keyframes heartbeat {
        0% { transform: scale(1); }
        14% { transform: scale(1.1); }
        28% { transform: scale(1); }
        42% { transform: scale(1.1); }
        70% { transform: scale(1); }
    }
</style>
</head>
<body style="padding:40px; font-family:sans-serif; text-align:center;">
    <h2>Pulse Animation Examples</h2>
    
    <button class="pulse-btn">PULSE</button>
    
    <div style="margin:40px;">
        <div class="pulse-ring"></div>
        <p>Pulse Ring (Expanding)</p>
    </div>
    
    <div class="heartbeat" style="display:inline-block; font-size:48px; color:#e74c3c;">♥</div>
    <p>Heartbeat</p>
</body>
</html>

বিভিন্ন Pulse Variation

ব্যবহারের ক্ষেত্র

• কল-টু-অ্যাকশন (CTA) বাটন আকর্ষণ
• নোটিফিকেশন বেজ/ব্যাজ
• লোডিং ইন্ডিকেটর (রিং পൾস)
• হার্টবিট/হেলথ অ্যাপ UI
• গেমিং: পাওয়ার-আপ ইন্ডিকেটর

সতর্কতা ও সেরা অনুশীলন

• Reduced Motion: @media (prefers-reduced-motion: reduce) { .pulse { animation: none; } } যোগ করুন।
• পারফরম্যান্স: will-change: transform যোগ করুন (GPU লেয়ার প্রোমোট)।
• ট্রান্সফরম অরিজিন: ডিফল্ট center center। প্রান্ত থেকে স্পন্দন করতে transform-origin: center bottom।
• অবদান: পൾস রিং-এর জন্য opacity: 0 এন্ডে রাখলে রিং আউট হয়ে যায়।
• অ্যাক্সেসিবিলিটি: চোখে আঘাতকারী तीব্র পൾস এড়ান (WCAG: ৩ হর্ট্জ নিচে ফ্ল্যাশ)۔