CSS Transitions, Animations and Effects
1. CSS Transitions
CSS transitions allow you to smoothly change property values over time, like color, size, or position.
Example: Button with Transition Effect
<button style="background-color: #2196F3; color: white; padding: 10px 20px; border: none; transition: background-color 0.5s;" onmouseover="this.style.backgroundColor='#0b7dda'" onmouseout="this.style.backgroundColor='#2196F3'">
Hover Me
</button>
2. CSS Animations (keyframes)
CSS animations use @keyframes to define changes over time, which are then assigned to an element with animation properties.
Example: Bouncing Box Animation
<div style="width: 50px; height: 50px; background: tomato; position: relative; animation: bounce 2s infinite;"></div>
<style>
@keyframes bounce {
0% { top: 0; }
50% { top: 100px; }
100% { top: 0; }
}
</style>
3. CSS Transform
The transform property can scale, rotate, or move (translate) elements.
Example: Hover to Scale and Rotate
<div style="width: 100px; height: 100px; background: orange; transition: transform 0.5s;"
onmouseover="this.style.transform='scale(1.2) rotate(15deg)'"
onmouseout="this.style.transform='scale(1) rotate(0deg)'">
</div>
4. CSS Shadows
box-shadow adds shadow around boxes, while text-shadow adds shadow to text.
Example: Box and Text Shadows
<div style="width: 200px; height: 100px; background: #eee; box-shadow: 5px 5px 15px rgba(0,0,0,0.3); margin-bottom: 10px;"></div>
<p style="font-size: 24px; text-shadow: 2px 2px 4px #aaa;">Shadow Text</p>
Shadow Text
5. CSS Filters
Filters like grayscale, blur, and brightness can be applied to images or elements.
Example: Grayscale and Blur Filter
<img src="~/images/sampleimg.jpg"
style="filter: grayscale(100%) blur(2px); border-radius: 8px;">
If you have any questions, feel free to ask. Thank you for reading!
If you have any query or question, please contact through below form. Our team will be in touch with you soon.
Please provide your valueable feedback or suggession as well.