CSS Animation Effects
Showing 28–54 of 140 effects
Expand Button
ButtonExpands button on hover
.expand-btn { padding: 10px 20px; background: #1e90ff; color: white; border: none; border-radius: 5px; transition: transform 0.3s ease; }
.expand-btn:hover { transform: scale(1.2); }
Neon Button
ButtonNeon glow effect on hover
.neon-btn { padding: 10px 20px; background: #9932cc; color: white; border: 2px solid #9932cc; border-radius: 5px; transition: box-shadow 0.3s ease, background 0.3s ease; }
.neon-btn:hover { background: transparent; box-shadow: 0 0 10px #9932cc; }
Ripple Button
ButtonRipple effect on click
.ripple-btn { padding: 10px 20px; background: #32cd32; color: white; border: none; border-radius: 5px; position: relative; overflow: hidden; }
.ripple-btn:active::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255,255,255,0.3); border-radius: 50%; transform: translate(-50%, -50%); animation: ripple 0.6s ease; }
@keyframes ripple { 100% { width: 200px; height: 200px; opacity: 0; } }
Slide Border Button
ButtonSliding border effect on hover
.slide-border-btn { padding: 10px 20px; background: #4682b4; color: white; border: none; position: relative; overflow: hidden; }
.slide-border-btn::after { content: ""; position: absolute; bottom: 0; left: -100%; width: 100%; height: 2px; background: #fff; transition: left 0.3s ease; }
.slide-border-btn:hover::after { left: 0; }
Glow Button
ButtonGlowing button on hover
.glow-btn { padding: 10px 20px; background: #ff4500; color: white; border: none; border-radius: 5px; transition: box-shadow 0.3s ease; }
.glow-btn:hover { box-shadow: 0 0 10px rgba(255,69,0,0.8); }
Bounce Button 14
ButtonBouncing animation for button
.bounce-btn-14 {
padding: 10px 20px;
background: #6f42c1;
color: white;
border: none;
border-radius: 5px;
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
Ripple Effect
ButtonRipple animation on click
.ripple { position: relative; overflow: hidden; cursor: pointer; padding: 15px 30px; background: #28a745; color: white; border: none; border-radius: 25px; }
.ripple::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,0.5); transition: width 0.6s, height 0.6s; transform: translate(-50%, -50%); }
.ripple:active::before { width: 300px; height: 300px; }
Pulse Button
ButtonPulsing button animation
.pulse-btn { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 5px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
Card Lift Hover 50
CardCard lifts up on hover
.card-lift-50 {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-lift-50:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
Card Lift Hover 44
CardCard lifts up on hover
.card-lift-44 {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-lift-44:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
Card Lift Hover 42
CardCard lifts up on hover
.card-lift-42 {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-lift-42:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
Card Lift Hover 37
CardCard lifts up on hover
.card-lift-37 {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-lift-37:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
Card Lift Hover 28
CardCard lifts up on hover
.card-lift-28 {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-lift-28:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
Card Lift Hover 26
CardCard lifts up on hover
.card-lift-26 {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-lift-26:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
Fade In Down
FadeFade In Down
Fade in with downward movement
.fade-in-down { opacity: 0; transform: translateY(-30px); animation: fadeInDown 1s ease forwards; }
@keyframes fadeInDown { to { opacity: 1; transform: translateY(0); } }
Fade In Up
FadeFade In Up
Fade in with upward movement
.fade-in-up { opacity: 0; transform: translateY(30px); animation: fadeInUp 1s ease forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
Fade Out
FadeFade out animation
.fade-out { opacity: 1; animation: fadeOut 2s ease-in-out forwards; }
@keyframes fadeOut { to { opacity: 0; } }
Glow Effect
GlowGlowing Element
Glowing border effect
.glow { padding: 20px; background: #343a40; color: white; border-radius: 10px; box-shadow: 0 0 20px #007bff; animation: glow 2s ease-in-out infinite alternate; }
@keyframes glow { from { box-shadow: 0 0 20px #007bff; } to { box-shadow: 0 0 30px #007bff, 0 0 40px #007bff; } }
Pulse Hover
HoverPulses element on hover
.pulse-hover { transition: transform 0.3s ease; }
.pulse-hover:hover { animation: pulse 0.6s ease; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
Flip Hover
HoverFlips element horizontally on hover
.flip-hover { transition: transform 0.5s ease; }
.flip-hover:hover { transform: rotateY(180deg); }
Bounce Hover
HoverBounces element on hover
.bounce-hover { transition: transform 0.3s ease; }
.bounce-hover:hover { animation: bounce 0.5s ease; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
Tilt Hover
HoverTilts element in 3D on hover
.tilt-hover { transition: transform 0.3s ease; }
.tilt-hover:hover { transform: perspective(500px) rotateX(10deg); }
Glow Hover
HoverAdds a glowing shadow on hover
.glow-hover { transition: box-shadow 0.3s ease; }
.glow-hover:hover { box-shadow: 0 0 15px rgba(255,69,0,0.7); }
Border Grow Hover
HoverExpands border on hover
.border-grow { border: 2px solid transparent; transition: border 0.3s ease; }
.border-grow:hover { border: 2px solid #1e90ff; }
Shrink Hover
HoverShrinks element slightly on hover
.shrink-hover { transition: transform 0.3s ease; }
.shrink-hover:hover { transform: scale(0.95); }
Lift Hover
HoverLifts element with shadow on hover
.lift-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.lift-hover:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
Skew Hover
HoverSkews element on hover
.skew-hover { transition: transform 0.3s ease; }
.skew-hover:hover { transform: skewX(-10deg); }