CSS দিয়ে Light Speed Out অ্যানিমেশন ইফেক্ট তৈরি করা

ওভারভিউ

Light Speed Out অ্যানিমেশন একটি এলিমেন্টকে খুব দ্রুত ডান পাশে স্লাইড করে (TranslateX) এবং একসাথে কোণাকুণি (SkewX) করে অদৃশ্য করে দেয়, যেন আলোর গতিতে বেরিয়ে যাচ্ছে। এটি Animate.css লাইব্রেরির একটি জনপ্রিয় অ্যানিমেশন।

কোড উদাহরণ

<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: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    
    @-webkit-keyframes lightSpeedOut {
        0% {
            -webkit-transform: translateX(0%) skewX(0deg);
            opacity: 1;
        }
        100% {
            -webkit-transform: translateX(100%) skewX(-30deg);
            opacity: 0;
        }
    }
    
    @keyframes lightSpeedOut {
        0% {
            transform: translateX(0%) skewX(0deg);
            opacity: 1;
        }
        100% {
            transform: translateX(100%) skewX(-30deg);
            opacity: 0;
        }
    }
    
    .lightSpeedOut {
        -webkit-animation-name: lightSpeedOut;
        animation-name: lightSpeedOut;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    
    .animated.lightSpeedOut {
        -webkit-animation-duration: 0.25s;
        animation-duration: 0.25s;
    }
</style>
</head>
<body>
    <div id="animated-example" class="animated lightSpeedOut"></div>
    <button onclick="myFunction()">Reload page</button>
    <script>
        function myFunction() { location.reload(); }
    </script>
</body>
</html>

কোড ব্যাখ্যা

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

<!DOCTYPE html>
<html>
<head>
<style>
    .card {
        width: 200px; height: 120px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        color: white; font-size: 20px; font-weight: bold;
        cursor: pointer;
        will-change: transform, opacity;
    }
    
    .card.light-speed-out {
        animation: lightSpeedOut 0.5s ease-in forwards;
        transform-origin: center left; /* বাম প্রান্ত থেকে বের হওয়া */
    }
    
    @keyframes lightSpeedOut {
        0% {
            transform: translateX(0) skewX(0deg);
            opacity: 1;
        }
        100% {
            transform: translateX(120%) skewX(-30deg);
            opacity: 0;
        }
    }
    
    /* Inversion: Light Speed In */
    @keyframes lightSpeedIn {
        0% {
            transform: translateX(-120%) skewX(30deg);
            opacity: 0;
        }
        100% {
            transform: translateX(0) skewX(0deg);
            opacity: 1;
        }
    }
    
    button { margin-top: 20px; padding: 10px 20px; font-size: 16px; }
</style>
</head>
<body style="padding:40px; font-family:sans-serif; text-align:center;">
    <div class="card" id="card">Light Speed Out</div>
    <button onclick="restart()">Restart Animation</button>
    
    <script>
        const card = document.getElementById('card');
        function restart() {
            card.classList.remove('light-speed-out');
            void card.offsetWidth; // Reflow trigger
            card.classList.add('light-speed-out');
        }
    </script>
</body>
</html>

সম্পর্কিত অ্যানিমেশন (Animate.css)

• lightSpeedIn - বিপরীত: বাম থেকে আলোর গতিতে এসে স্থির হওয়া
• bounceOut - বাউন্স করে আউট
• zoomOut - জুম আউট করে আউট
• rollOut - রোল করে আউট

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

• নোটিফিকেশন/টোস্ট অটো-ডিসমিস
• মডাল/ড্রঅয়ার বন্ধ অ্যানিমেশন
• পেজ এক্সিট ট্রানজিশন (SPA-এ)
• লিস্ট আইটেম ডিলিট অ্যানিমেশন
• গেম: স্পিড বুস্ট/টেলিপোর্ট ইফেক্ট

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

• Reduced Motion: @media (prefers-reduced-motion: reduce) { .lightSpeedOut { animation: none; opacity: 0; } }
• Transform Origin: ডিফল্ট center center। transform-origin: center left দিলে বাম প্রান্ত থেকে বের হয় (প্রাকৃতিক)।
• Will-change: will-change: transform, opacity যোগ করুন GPU লেয়ারের জন্য।
• Skew রিসেট: অ্যানিমেশন শেষে এলিমেন্ট DOM-এ থাকে কিন্তু skew থাকে। forwards ফিল মোডে শেষ স্টেট থাকে। পুনরায় ব্যবহার করতে ক্লাস রিমুভ/অ্যাড করুন।
• Accessibility: দ্রুত মোশন (Fast motion) ভেস্টিবুলার ডিসঅর্ডার ব্যবহারকারীদের জন্য সমস্যা সৃষ্টি করতে পারে।