Pratik TamhaneCSS transitions are a great way to add subtle animations to your website, improving the user experience and adding a touch of interactivity. Below are 12 CSS transition effects you can easily implement in your projects.
1. Fade In
Copy code
.fade-in {
opacity: 0;
transition: opacity 0.5s ease-in;
}
.fade-in:hover {
opacity: 1;
}
2. Slide Up
Copy code
.slide-up {
transform: translateY(100%);
transition: transform 0.5s ease-in-out;
}
.slide-up:hover {
transform: translateY(0);
}
3. Scale Up
Copy code
.scale-up {
transform: scale(1);
transition: transform 0.5s ease-in-out;
}
.scale-up:hover {
transform: scale(1.2);
}
4. Rotate
Copy code
.rotate {
transform: rotate(0deg);
transition: transform 0.5s ease-in-out;
}
.rotate:hover {
transform: rotate(45deg);
}
5. Skew
Copy code
.skew {
transform: skewX(0deg);
transition: transform 0.5s ease;
}
.skew:hover {
transform: skewX(20deg);
}
6. Grow Width
Copy code
.grow-width {
width: 100px;
transition: width 0.5s ease-in-out;
}
.grow-width:hover {
width: 200px;
}
7. Background Color Change
Copy code
.bg-color-change {
background-color: #3498db;
transition: background-color 0.5s ease;
}
.bg-color-change:hover {
background-color: #2ecc71;
}
8. Text Color Change
Copy code
.text-color-change {
color: #000;
transition: color 0.3s ease;
}
.text-color-change:hover {
color: #e74c3c;
}
9. Border Radius Change
Copy code
.border-radius-change {
border-radius: 0;
transition: border-radius 0.5s ease;
}
.border-radius-change:hover {
border-radius: 50%;
}
10. Box Shadow
Copy code
.box-shadow {
box-shadow: none;
transition: box-shadow 0.3s ease-in-out;
}
.box-shadow:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
11. Text Shadow
Copy code
.text-shadow {
text-shadow: none;
transition: text-shadow 0.3s ease;
}
.text-shadow:hover {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
12. Opacity Change
Copy code
.opacity-change {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.opacity-change:hover {
opacity: 0.5;
}
Conclusion
Adding CSS transitions can greatly enhance the user interface of your website. Experiment with these effects to create a more engaging and interactive experience for your users.
| Part | Title | Link |
|---|---|---|
| 1 | Capturing Attention with Motion UI CSS Animations ✨- : Fade In/Out, Slide In/Out, and Scale Up Effects 🫠 | Read |
| 2 | Capturing Attention with Motion UI CSS Animations 🎨- : Bounce Animation, Parallax Scrolling, and Hover Animations 🫠 | Read |
Happy coding!
Shop Link : https://buymeacoffee.com/pratik1110r/extras
LinkedIn : https://www.linkedin.com/in/pratik-tamhane-583023217/
Behance : https://www.behance.net/pratiktamhane
