CSS Animation Effects
Showing 1–27 of 140 effects
Roll In
AnimRoll in animation
.roll-in { transform: translateX(-100%) rotate(-120deg); animation: rollIn 1s ease-out forwards; }
@keyframes rollIn { to { transform: translateX(0) rotate(0deg); } }
Rubber Band
AnimRubber band elastic effect
.rubber-band { animation: rubberBand 1s ease-in-out; }
@keyframes rubberBand { 0% { transform: scale(1); } 30% { transform: scaleX(1.25) scaleY(0.75); } 40% { transform: scaleX(0.75) scaleY(1.25); } 60% { transform: scaleX(1.15) scaleY(0.85); } 100% { transform: scale(1); } }
Flash Effect
AnimFlashing animation
.flash { animation: flash 2s ease-in-out infinite; }
@keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } }
Tada Effect
AnimTada celebration animation
.tada { animation: tada 1s ease-in-out; }
@keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } }
Hue Rotate
AnimHue rotation animation
.hue-rotate { animation: hueRotate 3s linear infinite; }
@keyframes hueRotate { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
Swing
AnimSwing animation
.swing { transform-origin: top center; animation: swing 2s ease-in-out infinite; }
@keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }
Border Radius Morph
AnimBorder radius morphing
.border-morph { width: 100px; height: 100px; background: #20c997; animation: borderMorph 3s ease-in-out infinite; }
@keyframes borderMorph { 0%, 100% { border-radius: 0; } 25% { border-radius: 50%; } 50% { border-radius: 0 50% 0 50%; } 75% { border-radius: 50% 0 50% 0; } }
Jiggle
AnimJiggle animation
.jiggle { animation: jiggle 0.6s ease-in-out infinite; }
@keyframes jiggle { 0% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
Scale Pulse
AnimPulsing scale animation
.scale-pulse { animation: scalePulse 2s ease-in-out infinite; }
@keyframes scalePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
Rotate 360
AnimFull rotation animation
.rotate-360 { animation: rotate360 2s linear infinite; }
@keyframes rotate360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
Wobble Effect
AnimWobble animation
.wobble { animation: wobble 1s ease-in-out infinite; }
@keyframes wobble { 0% { transform: rotate(0deg); } 15% { transform: rotate(-5deg); } 30% { transform: rotate(3deg); } 45% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); } 75% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } }
Color Change
AnimBackground color transition
.color-change { width: 150px; height: 100px; animation: colorChange 3s ease-in-out infinite; }
@keyframes colorChange { 0% { background: #ff6b6b; } 25% { background: #4ecdc4; } 50% { background: #45b7d1; } 75% { background: #96c93d; } 100% { background: #ff6b6b; } }
Elastic Scale
AnimElastic scaling animation
.elastic { animation: elastic 2s ease-in-out infinite; }
@keyframes elastic { 0% { transform: scale(1); } 30% { transform: scale(1.25); } 40% { transform: scale(0.75); } 60% { transform: scale(1.15); } 80% { transform: scale(0.95); } 100% { transform: scale(1); } }
Heartbeat
AnimHeartbeat animation
.heartbeat { animation: heartbeat 1.5s ease-in-out infinite both; }
@keyframes heartbeat { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } }
Floating Animation
AnimFloating up and down
.floating { animation: floating 3s ease-in-out infinite; }
@keyframes floating { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
Morphing Shape
AnimShape morphing animation
.morph { width: 100px; height: 100px; background: #e83e8c; animation: morph 3s ease-in-out infinite; }
@keyframes morph { 0%, 100% { border-radius: 50%; } 25% { border-radius: 0; transform: rotate(45deg); } 50% { border-radius: 50% 0; } 75% { border-radius: 0 50%; } }
Wave Animation
AnimCSS wave effect
.wave { width: 300px; height: 100px; background: #007bff; position: relative; overflow: hidden; }
.wave::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%); animation: wave 3s linear infinite; }
@keyframes wave { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
Shake Effect
AnimShaking animation
.shake { animation: shake 0.5s ease-in-out infinite; }
@keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } }
Bounce Animation
AnimBouncing element animation
.bounce { animation: bounce 2s infinite; }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } }
Gradient Background 12
BackgroundAnimated gradient background
.gradient-bg-12 {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
Gradient Background
BgAnimated gradient background
.gradient-bg { width: 300px; height: 200px; background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 4s ease infinite; }
@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
Border Animation
BorderAnimated border effect
.border-animate { width: 200px; height: 100px; background: white; position: relative; }
.border-animate::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 3px solid transparent; border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96c93d) 1; animation: border-rotate 2s linear infinite; }
@keyframes border-rotate { 0% { border-image-source: linear-gradient(0deg, #ff6b6b, #4ecdc4, #45b7d1, #96c93d); } 100% { border-image-source: linear-gradient(360deg, #ff6b6b, #4ecdc4, #45b7d1, #96c93d); } }
Pop Button
ButtonPops up on hover
.pop-btn { padding: 10px 20px; background: #ffa500; color: white; border: none; border-radius: 5px; transition: transform 0.2s ease; }
.pop-btn:hover { transform: translateY(-3px); }
Spin Button
ButtonSpins icon on hover
.spin-btn { padding: 10px 20px; background: #20b2aa; color: white; border: none; border-radius: 5px; }
.spin-btn i { transition: transform 0.3s ease; }
.spin-btn:hover i { transform: rotate(360deg); }
Outline Button
ButtonOutline appears on hover
.outline-btn { padding: 10px 20px; background: #4682b4; color: white; border: 2px solid transparent; border-radius: 5px; transition: border 0.3s ease; }
.outline-btn:hover { border: 2px solid #fff; }
Gradient Button
ButtonGradient background shift on hover
.gradient-btn { padding: 10px 20px; background: linear-gradient(to right, #ff4500, #ff8c00); color: white; border: none; border-radius: 5px; transition: background 0.3s ease; }
.gradient-btn:hover { background: linear-gradient(to right, #ff8c00, #ff4500); }
Shake Button
ButtonShakes button on hover
.shake-btn { padding: 10px 20px; background: #ff69b4; color: white; border: none; border-radius: 5px; }
.shake-btn:hover { animation: shake 0.5s ease; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
CSSTOOLBOX is a free CSS and Tailwind toolbox offering online generators for gradients, shadows, layouts, animations, and color palettes for modern web development.