CSS Animations

📘 CSS Animation Kya Hai?

Hindi: CSS Animation ka use kisi element ki position, size, opacity, color ya appearance ko time ke saath change karne ke liye kiya jata hai.

English: CSS animations allow an element to change its appearance or position over a period of time.

💡 Animation Kyu Use Karte Hain?

Website mein animations ka use:

• Buttons ko attractive banane ke liye
• Cards par hover effects dene ke liye
• Sections ko smoothly appear karne ke liye
• Website ko modern feel dene ke liye
• User experience improve karne ke liye

1️⃣ CSS Transition

transition kisi property ke change ko smooth banata hai.

.button{
    background:#00d9ff;
    transition:.3s;
}

.button:hover{
    transform:translateY(-3px);
}

Jab user button par mouse le jayega, change smoothly hoga.

2️⃣ CSS Transform

transform se element ko move, rotate, scale ya change kiya ja sakta hai.

.box:hover{
    transform:scale(1.1);
}

Is example mein box hover karne par thoda bada hoga.

3️⃣ Element Move Karna

translateY() element ko vertically move karne ke liye use hota hai.

.card:hover{
    transform:translateY(-8px);
}

Iska use professional cards ke hover effect mein commonly kiya jata hai.

4️⃣ @keyframes

Complex CSS animation banane ke liye @keyframes use kiya jata hai.

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

Yahan animation transparent state se visible state mein change hoti hai.

5️⃣ animation Property

Keyframes ko element par apply karne ke liye animation property use karte hain.

.box{
    animation:fadeIn 1s ease;
}

Isme animation ka naam fadeIn aur duration 1 second hai.

6️⃣ Animation Duration

Animation kitne time tak chalegi, ye animation-duration se set kar sakte hain.

.box{
    animation-name:fadeIn;
    animation-duration:2s;
}

💻 Complete CSS Animation Example

Ab ek simple animated box banate hain.

<!DOCTYPE html>
<html>

<head>

<style>

.box{
    width:150px;
    height:150px;
    background:#00d9ff;
    border-radius:15px;

    animation:showBox 2s ease;
}

@keyframes showBox{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

🎨 Professional Hover Animation

Website cards aur buttons mein simple hover animation bahut useful hoti hai.

.card{
    transition:.3s ease;
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 30px rgba(0,0,0,.15);
}

⚠️ Important Note