imcbusiness

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; }

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

imcbusiness

imcbusiness

टिप्पणियाँ

इस ब्लॉग से लोकप्रिय पोस्ट

जीवन शक्ति रस ,jivan Shakti ras

हिमालयन बेरी