CSS Animation Effects

🔥 CSS Animation Effects Guide

📌 Table of Contents

1. CSS Animation Kya Hai?
2. CSS Animation Ka Basic Structure
3. Popular CSS Animation Effects
4. Advanced Animation Tips
5. Demo Buttons

1️⃣ CSS Animation Kya Hai?

CSS Animation ek technique hai jo bina JavaScript ke HTML elements ko animate karne ki suvidha deti hai. Yeh animations page load, hover ya event ke through activate ho sakti hain.

2️⃣ CSS Animation Ka Basic Structure

Ek simple CSS animation create karne ke liye, hume **@keyframes** aur **animation properties** ka use karna padta hai. Yeh ek example hai jo ek box ko left se right move karega:

        
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    animation: moveRight 3s infinite alternate;
}

@keyframes moveRight {
    from { left: 0; }
    to { left: 300px; }
}

3️⃣ Popular CSS Animation Effects

🎭 Fade In Effect

        
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade {
    animation: fadeIn 2s ease-in-out;
}

💥 Bounce Effect

        
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.bounce {
    animation: bounce 1s infinite;
}

🔄 Rotate Effect

        
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rotate {
    animation: rotate 2s linear infinite;
}

💗 Pulse Effect

        
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.pulse {
    animation: pulse 1.5s infinite ease-in-out;
}

4️⃣ Advanced Animation Tips

Multiple Animations: Ek element par ek se zyada animations lagane ke liye, commas `,` ka use karein.
Hover Effects: Animation sirf tab chale jab user kisi element par hover kare.
Delay & Speed Control: Animation delay aur speed customize kar sakte hain.

5️⃣ Demo Buttons

Niche diye gaye buttons aapko live animations dikhayenge:

यह ब्लॉग खोजें

imcbusiness

imcbusiness

टिप्पणियाँ