Day 8: Advanced CSS – Animations, Transitions & Pseudo-Classes
Namaskaram! Innu nammude session-il *CSS Animations, Transitions & Pseudo-Classes* padikkan pokunnu. Ee topics upayogichu *interactive & stylish websites* create cheyyam.
🔹 1. CSS Transitions – Smooth Effects
*Transitions* upayogichu elements *smooth changes* cheyyum (ex: hover effects, color change, size increase).
📌 1.1 Example – Scale Effect on Hover
.box {
width: 100px;
height: 100px;
background: blue;
transition: transform 0.5s ease-in-out;
}
.box:hover {
transform: scale(1.2);
}
Hover
🔹 2. CSS Animations – Keyframe-based Motion
*Animations* upayogichu elements *move cheyyan* patum (position, size, opacity, color, etc.). *@keyframes* property upayogikkum.
📌 2.1 Example – Moving Box
@keyframes moveBox {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.animated-box {
animation: moveBox 2s infinite alternate;
}
Move
🔹 3. Pseudo-Classes – Special Effects
*Pseudo-Classes* use cheythal specific states handle cheyyam (ex: hover, focus, first-child, last-child).
📌 3.1 Example – Button Hover Effect
.button {
background: orange;
transition: background 0.3s ease-in-out;
}
.button:hover {
background: darkorange;
}
📌 3.2 Example – Focus Effect on Input
.input-box:focus {
border: 2px solid blue;
}
🎯 Conclusion
Innu nammude sessionil padichathu:
- CSS Transitions – Smooth animations create cheyyan
- CSS Animations – Motion effects add cheyyan
- Pseudo-Classes – Special element states handle cheyyan
🔥 *Next session:* Responsive Design Techniques – Don't miss it!