There are three ways to implement animation
- Animate the wrapper/container
- Animate the icon/button itself
- Combination of both
Animate the Wrapper/Container
Check multiple ways to wrap an icon here!
<div className="icon-wrapper">
<i className="bi bi-bell"></i>
</div>Then add css to the wrapper
1. Fill Animation
.icon-wrapper:hover {
background-color: rgba(0, 123, 255, 0.12);
transition: background-color 0.3s ease;
}2. Size/Position Animation
.icon-wrapper:hover {
transform: translateY(-3px) scale(1.05);
transition: transform 0.25s ease;
}3. Shadow Animation
.icon-wrapper:hover {
box-shadow: 0 4px 10px rgba(0,0,0,0.18);
transition: box-shadow 0.25s ease;
}4. Border Animation
.icon-wrapper {
border: 2px solid transparent;
transition: border-color 0.25s ease;
}
.icon-wrapper:hover {
border-color: #0d6efd;
}Animate the icon
To express your emotion!
1. Colour/ Opacity change
.icon {
color: #6c757d;
transition: color 0.25s ease, opacity 0.25s ease;
}
.icon:hover {
color: #0d6efd;
opacity: 1;
}2. Scale / Pulse / Heartbeat
.icon:hover {
animation: heartbeat 0.9s ease;
}
@keyframes heartbeat {
0%,100% { transform: scale(1); }
15% { transform: scale(1.15); }
30% { transform: scale(0.95); }
45% { transform: scale(1.1); }
}
3. Rotation / Spin
.icon:hover {
transform: rotate(180deg);
transition: transform 0.3s ease;
}4.Bounce / Slide / Wobble
.icon:hover {
animation: bounce 0.4s ease;
}
@keyframes bounce {
0%,100% { transform: translateY(0); }
40% { transform: translateY(-6px); }
}5.Icon-Specific Patterns
- Bell
- Heart (heartbeat or color change)
- Star (spin + glow)
- Arrow (slice in one direction)
.icon:hover {
animation: ring 0.6s ease;
}
@keyframes ring {
0%,100% { transform: rotate(0); }
20% { transform: rotate(-10deg); }
40% { transform: rotate(8deg); }
60% { transform: rotate(-6deg); }
80% { transform: rotate(3deg); }
}Combination
Just use your imagination 🙂
Leave a Reply