CSS Keyframe Animation Collection

Welcome to the Complete CSS Keyframe Animation Collection a curated, practical library of ready-made CSS animations you can paste into your projects immediately. The gallery features dozens of effects: bounce, fade, roll, slide, swing, swirl, rotate, and an extensive set of scale in/out variations (including horizontal and vertical variants). Each animation is displayed as a live demo so you can see the motion in context, and every card includes a one-click Copy Code button that copies a complete CSS snippet (class + @keyframes) to your clipboard.

Bounce Out Bottom

Bounce Out Bottom

/* CSS for: Bounce Out Bottom */
.box-animation.Bounce-Out-Bottom h3 { animation: BounceOutBottom 1.8s cubic-bezier(.215,.61,.355,1) both infinite; }
@keyframes BounceOutBottom { 0%{ transform: translateY(0) scale(1); opacity:1;} 20%{ transform: translateY(-10px) scale(1.02);} 100%{ transform: translateY(200%) scale(.6); opacity:0;} }

Bounce Out Forward

Bounce Out Forward

/* CSS for: Bounce Out Forward */
.box-animation.Bounce-Out-Forward h3 { animation: BounceOutForward 1.8s ease both infinite; transform-origin:center; }
@keyframes BounceOutForward { 0%{ transform: translateZ(0) scale(1); opacity:1;} 100%{ transform: translateZ(400px) scale(.4); opacity:0;} }

Bounce Out Left

Bounce Out Left

/* CSS for: Bounce Out Left */
.box-animation.Bounce-Out-Left h3 { animation: BounceOutLeft 1.8s ease both infinite; }
@keyframes BounceOutLeft { 0%{ transform: translateX(0) scale(1); opacity:1;} 100%{ transform: translateX(-150%) scale(.5); opacity:0;} }

Bounce Out Right

Bounce Out Right

/* CSS for: Bounce Out Right */
.box-animation.Bounce-Out-Right h3 { animation: BounceOutRight 1.8s ease both infinite; }
@keyframes BounceOutRight { 0%{ transform: translateX(0) scale(1); opacity:1;} 100%{ transform: translateX(150%) scale(.5); opacity:0;} }

Fade Out Backward

Fade Out Backward

/* CSS for: Fade Out Backward */
.box-animation.Fade-Out-Backward h3 { animation: FadeOutBackward 1.8s ease both infinite; transform-origin:center; }
@keyframes FadeOutBackward { 0%{ opacity:1; transform: translateZ(0) scale(1);} 100%{ opacity:0; transform: translateZ(-300px) scale(.6);} }

Bounce Out Top

Bounce Out Top

/* CSS for: Bounce Out Top */
.box-animation.Bounce-Out-Top h3 { animation: BounceOutTop 1.8s cubic-bezier(.215,.61,.355,1) both infinite; }
@keyframes BounceOutTop { 0%{ transform: translateY(0) scale(1); opacity:1;} 100%{ transform: translateY(-200%) scale(.6); opacity:0;} }

Fade Out Bottom

Fade Out Bottom

/* CSS for: Fade Out Bottom */
.box-animation.Fade-Out-Bottom h3 { animation: FadeOutBottom 1.6s ease both infinite; }
@keyframes FadeOutBottom { 0%{ opacity:1; transform: translateY(0);} 100%{ opacity:0; transform: translateY(80px);} }

Fade Out Center

Fade Out Center

/* CSS for: Fade Out Center */
.box-animation.Fade-Out-Center h3 { animation: FadeOutCenter 1.6s ease both infinite; }
@keyframes FadeOutCenter { 0%{ opacity:1; transform: scale(1);} 100%{ opacity:0; transform: scale(.2);} }

Fade Out Forward

Fade Out Forward

/* CSS for: Fade Out Forward */
.box-animation.Fade-Out-Forward h3 { animation: FadeOutForward 1.8s ease both infinite; transform-origin:center; }
@keyframes FadeOutForward { 0%{ opacity:1; transform: translateZ(0);} 100%{ opacity:0; transform: translateZ(300px) scale(.6);} }

Fade Out Left

Fade Out Left

/* CSS for: Fade Out Left */
.box-animation.Fade-Out-Left h3 { animation: FadeOutLeft 1.6s ease both infinite; }
@keyframes FadeOutLeft { 0%{ opacity:1; transform: translateX(0);} 100%{ opacity:0; transform: translateX(-100px);} }

Fade Out Right

Fade Out Right

/* CSS for: Fade Out Right */
.box-animation.Fade-Out-Right h3 { animation: FadeOutRight 1.6s ease both infinite; }
@keyframes FadeOutRight { 0%{ opacity:1; transform: translateX(0);} 100%{ opacity:0; transform: translateX(100px);} }

Fade Out Top

Fade Out Top

/* CSS for: Fade Out Top */
.box-animation.Fade-Out-Top h3 { animation: FadeOutTop 1.6s ease both infinite; }
@keyframes FadeOutTop { 0%{ opacity:1; transform: translateY(0);} 100%{ opacity:0; transform: translateY(-100px);} }

Roll Out Bottom

Roll Out Bottom

/* CSS for: Roll Out Bottom */
.box-animation.Roll-Out-Bottom h3 { animation: RollOutBottom 1.8s cubic-bezier(.4,.0,.2,1) both infinite; }
@keyframes RollOutBottom { 0%{ transform: rotate(0deg) translateY(0); opacity:1;} 100%{ transform: rotate(540deg) translateY(200px); opacity:0;} }

Roll Out Left

Roll Out Left

/* CSS for: Roll Out Left */
.box-animation.Roll-Out-Left h3 { animation: RollOutLeft 1.8s cubic-bezier(.4,.0,.2,1) both infinite; }
@keyframes RollOutLeft { 0%{ transform: rotate(0deg) translateX(0); opacity:1;} 100%{ transform: rotate(-540deg) translateX(-200px); opacity:0;} }

Roll Out Right

Roll Out Right

/* CSS for: Roll Out Right */
.box-animation.Roll-Out-Right h3 { animation: RollOutRight 1.8s cubic-bezier(.4,.0,.2,1) both infinite; }
@keyframes RollOutRight { 0%{ transform: rotate(0deg) translateX(0); opacity:1;} 100%{ transform: rotate(540deg) translateX(200px); opacity:0;} }

Roll Out Top

Roll Out Top

/* CSS for: Roll Out Top */
.box-animation.Roll-Out-Top h3 { animation: RollOutTop 1.8s cubic-bezier(.4,.0,.2,1) both infinite; }
@keyframes RollOutTop { 0%{ transform: rotate(0deg) translateY(0); opacity:1;} 100%{ transform: rotate(-540deg) translateY(-200px); opacity:0;} }

Scale Out Bottom

Scale Out Bottom

/* CSS for: Scale Out Bottom */
.box-animation.Scale-Out-Bottom h3 { animation: ScaleOutBottom 1.6s ease both infinite; }
@keyframes ScaleOutBottom { 0%{ transform: scale(1) translateY(0); opacity:1;} 100%{ transform: scale(0) translateY(200px); opacity:0;} }

Scale Out Center

Scale Out Center

/* CSS for: Scale Out Center */
.box-animation.Scale-Out-Center h3 { animation: ScaleOutCenter 1.6s ease both infinite; }
@keyframes ScaleOutCenter { 0%{ transform: scale(1); opacity:1;} 100%{ transform: scale(0); opacity:0;} }

Slide Out Right

Slide Out Right

/* CSS for: Slide Out Right */
.box-animation.Slide-Out-Right h3 { animation: SlideOutRight 1.6s ease-in-out both infinite; }
@keyframes SlideOutRight { 0%{ transform: translateX(0); opacity:1;} 100%{ transform: translateX(120%); opacity:0;} }

Slide Out Top

Slide Out Top

/* CSS for: Slide Out Top */
.box-animation.Slide-Out-Top h3 { animation: SlideOutTop 1.6s ease-in-out both infinite; }
@keyframes SlideOutTop { 0%{ transform: translateY(0); opacity:1;} 100%{ transform: translateY(-120%); opacity:0;} }

Swing Out Backward Bottom

Swing Out Backward Bottom

/* CSS for: Swing Out Backward Bottom */
.box-animation.Swing-Out-Backward-Bottom h3 { animation: SwingOutBackward 1.6s ease both infinite; transform-origin:center; }
@keyframes SwingOutBackward { 0%{ transform: rotate(0deg) translate(0); opacity:1;} 60%{ transform: rotate(10deg) translateY(-6px);} 100%{ transform: rotate(90deg) translateY(-200px); opacity:0;} }

Swing Out Backward Left

Swing Out Backward Left

/* CSS for: Swing Out Backward Left */
.box-animation.Swing-Out-Backward-Left h3 { animation: SwingOutBackward 1.6s ease both infinite; transform-origin:center; }
@keyframes SwingOutBackward { 0%{ transform: rotate(0deg) translate(0); opacity:1;} 60%{ transform: rotate(10deg) translateY(-6px);} 100%{ transform: rotate(90deg) translateY(-200px); opacity:0;} }

Swing Out Backward Right

Swing Out Backward Right

/* CSS for: Swing Out Backward Right */
.box-animation.Swing-Out-Backward-Right h3 { animation: SwingOutBackward 1.6s ease both infinite; transform-origin:center; }
@keyframes SwingOutBackward { 0%{ transform: rotate(0deg) translate(0); opacity:1;} 60%{ transform: rotate(10deg) translateY(-6px);} 100%{ transform: rotate(90deg) translateY(-200px); opacity:0;} }

Swing Out Backward Top

Swing Out Backward Top

/* CSS for: Swing Out Backward Top */
.box-animation.Swing-Out-Backward-Top h3 { animation: SwingOutBackward 1.6s ease both infinite; transform-origin:center; }
@keyframes SwingOutBackward { 0%{ transform: rotate(0deg) translate(0); opacity:1;} 60%{ transform: rotate(10deg) translateY(-6px);} 100%{ transform: rotate(90deg) translateY(-200px); opacity:0;} }

Swing Out Forward Bottom

Swing Out Forward Bottom

/* CSS for: Swing Out Forward Bottom */
.box-animation.Swing-Out-Forward-Bottom h3 { animation: SwingOutForward 1.6s ease both infinite; transform-origin:center; }
@keyframes SwingOutForward { 0%{ transform: rotate(0deg) translateZ(0); opacity:1;} 100%{ transform: rotate(-90deg) translateZ(300px) scale(.5); opacity:0;} }

Swing Out Forward Left

Swing Out Forward Left

/* CSS for: Swing Out Forward Left */
.box-animation.Swing-Out-Forward-Left h3 { animation: SwingOutForward 1.6s ease both infinite; transform-origin:center; }
@keyframes SwingOutForward { 0%{ transform: rotate(0deg) translateZ(0); opacity:1;} 100%{ transform: rotate(-90deg) translateZ(300px) scale(.5); opacity:0;} }

Swing Out Forward Right

Swing Out Forward Right

/* CSS for: Swing Out Forward Right */
.box-animation.Swing-Out-Forward-Right h3 { animation: SwingOutForward 1.6s ease both infinite; transform-origin:center; }
@keyframes SwingOutForward { 0%{ transform: rotate(0deg) translateZ(0); opacity:1;} 100%{ transform: rotate(-90deg) translateZ(300px) scale(.5); opacity:0;} }

Swing Out Forward Top

Swing Out Forward Top

/* CSS for: Swing Out Forward Top */
.box-animation.Swing-Out-Forward-Top h3 { animation: SwingOutForward 1.6s ease both infinite; transform-origin:center; }
@keyframes SwingOutForward { 0%{ transform: rotate(0deg) translateZ(0); opacity:1;} 100%{ transform: rotate(-90deg) translateZ(300px) scale(.5); opacity:0;} }

Swirl Out Backward Center

Swirl Out Backward Center

/* CSS for: Swirl Out Backward Center */
.box-animation.Swirl-Out-Backward-Center h3 { animation: SwirlOutBackward 1.8s ease both infinite; transform-origin:center; }
@keyframes SwirlOutBackward { 0%{ transform: rotate(0deg) translate(0); opacity:1;} 100%{ transform: rotate(720deg) translateY(-160px) scale(.4); opacity:0;} }

Swirl Out Backward Left

Swirl Out Backward Left

/* CSS for: Swirl Out Backward Left */
.box-animation.Swirl-Out-Backward-Left h3 { animation: SwirlOutBackward 1.8s ease both infinite; transform-origin:center; }
@keyframes SwirlOutBackward { 0%{ transform: rotate(0deg) translate(0); opacity:1;} 100%{ transform: rotate(720deg) translateY(-160px) scale(.4); opacity:0;} }

Swirl Out Forward Center

Swirl Out Forward Center

/* CSS for: Swirl Out Forward Center */
.box-animation.Swirl-Out-Forward-Center h3 { animation: SwirlOutForward 1.8s ease both infinite; transform-origin:center; }
@keyframes SwirlOutForward { 0%{ transform: rotate(0deg) translateZ(0); opacity:1;} 100%{ transform: rotate(-720deg) translateZ(220px) scale(.45); opacity:0;} }

Swirl Out Forward Left

Swirl Out Forward Left

/* CSS for: Swirl Out Forward Left */
.box-animation.Swirl-Out-Forward-Left h3 { animation: SwirlOutForward 1.8s ease both infinite; transform-origin:center; }
@keyframes SwirlOutForward { 0%{ transform: rotate(0deg) translateZ(0); opacity:1;} 100%{ transform: rotate(-720deg) translateZ(220px) scale(.45); opacity:0;} }

Bounce In Backward

Bounce In Backward

/* CSS for: Bounce In Backward */
.box-animation.Bounce-In-Backward h3 { animation: BounceIn 1.2s cubic-bezier(.215,.61,.355,1) both infinite; }
@keyframes BounceIn { 0%{ transform: translateY(60px) scale(.9); opacity:0;} 40%{ transform: translateY(-10px) scale(1.02); opacity:1;} 60%{ transform: translateY(5px);} 100%{ transform: translateY(0) scale(1);} }

Bounce In Bottom

Bounce In Bottom

/* CSS for: Bounce In Bottom */
.box-animation.Bounce-In-Bottom h3 { animation: BounceIn 1.2s cubic-bezier(.215,.61,.355,1) both infinite; }
@keyframes BounceIn { 0%{ transform: translateY(60px) scale(.9); opacity:0;} 40%{ transform: translateY(-10px) scale(1.02); opacity:1;} 60%{ transform: translateY(5px);} 100%{ transform: translateY(0) scale(1);} }

Bounce In Forward

Bounce In Forward

/* CSS for: Bounce In Forward */
.box-animation.Bounce-In-Forward h3 { animation: BounceIn 1.2s cubic-bezier(.215,.61,.355,1) both infinite; }
@keyframes BounceIn { 0%{ transform: translateY(60px) scale(.9); opacity:0;} 40%{ transform: translateY(-10px) scale(1.02); opacity:1;} 60%{ transform: translateY(5px);} 100%{ transform: translateY(0) scale(1);} }

Bounce In Left

Bounce In Left

/* CSS for: Bounce In Left */
.box-animation.Bounce-In-Left h3 { animation: BounceIn 1.2s cubic-bezier(.215,.61,.355,1) both infinite; }
@keyframes BounceIn { 0%{ transform: translateY(60px) scale(.9); opacity:0;} 40%{ transform: translateY(-10px) scale(1.02); opacity:1;} 60%{ transform: translateY(5px);} 100%{ transform: translateY(0) scale(1);} }

Fade In Backward

Fade In Backward

/* CSS for: Fade In Backward */
.box-animation.Fade-In-Backward h3 { animation: FadeIn 1.2s ease both infinite; }
@keyframes FadeIn { 0%{ opacity:0; transform: translateY(12px) scale(.98);} 100%{ opacity:1; transform: translateY(0) scale(1);} }

Fade In Bottom

Fade In Bottom

/* CSS for: Fade In Bottom */
.box-animation.Fade-In-Bottom h3 { animation: FadeIn 1.2s ease both infinite; }
@keyframes FadeIn { 0%{ opacity:0; transform: translateY(12px) scale(.98);} 100%{ opacity:1; transform: translateY(0) scale(1);} }

Fade In Center

Fade In Center

/* CSS for: Fade In Center */
.box-animation.Fade-In-Center h3 { animation: FadeIn 1.2s ease both infinite; }
@keyframes FadeIn { 0%{ opacity:0; transform: translateY(12px) scale(.98);} 100%{ opacity:1; transform: translateY(0) scale(1);} }

Fade In Forward

Fade In Forward

/* CSS for: Fade In Forward */
.box-animation.Fade-In-Forward h3 { animation: FadeIn 1.2s ease both infinite; }
@keyframes FadeIn { 0%{ opacity:0; transform: translateY(12px) scale(.98);} 100%{ opacity:1; transform: translateY(0) scale(1);} }

Fade In Left

Fade In Left

/* CSS for: Fade In Left */
.box-animation.Fade-In-Left h3 { animation: FadeIn 1.2s ease both infinite; }
@keyframes FadeIn { 0%{ opacity:0; transform: translateY(12px) scale(.98);} 100%{ opacity:1; transform: translateY(0) scale(1);} }

Fade In Top

Fade In Top

/* CSS for: Fade In Top */
.box-animation.Fade-In-Top h3 { animation: FadeIn 1.2s ease both infinite; }
@keyframes FadeIn { 0%{ opacity:0; transform: translateY(12px) scale(.98);} 100%{ opacity:1; transform: translateY(0) scale(1);} }

Roll In Bottom

Roll In Bottom

/* CSS for: Roll In Bottom */
.box-animation.Roll-In-Bottom h3 { animation: RollIn 1.6s cubic-bezier(.2,.7,.2,1) both infinite; }
@keyframes RollIn { 0%{ transform: rotate(-120deg) translateY(200px); opacity:0;} 60%{ transform: rotate(10deg) translateY(-10px); opacity:1;} 100%{ transform: rotate(0deg) translateY(0); opacity:1;} }

Roll In Left

Roll In Left

/* CSS for: Roll In Left */
.box-animation.Roll-In-Left h3 { animation: RollIn 1.6s cubic-bezier(.2,.7,.2,1) both infinite; }
@keyframes RollIn { 0%{ transform: rotate(-120deg) translateY(200px); opacity:0;} 60%{ transform: rotate(10deg) translateY(-10px); opacity:1;} 100%{ transform: rotate(0deg) translateY(0); opacity:1;} }

Scale In Backward Bottom

Scale In Backward Bottom

/* CSS for: Scale In Backward Bottom */
.box-animation.Scale-In-Backward-Bottom h3 { animation: ScaleIn 1.6s ease both infinite; }
@keyframes ScaleIn { 0%{ transform: scale(.2) translateY(40px); opacity:0;} 60%{ transform: scale(1.05); opacity:1;} 100%{ transform: scale(1) translateY(0); opacity:1;} }

Scale In Backward Center

Scale In Backward Center

/* CSS for: Scale In Backward Center */
.box-animation.Scale-In-Backward-Center h3 { animation: ScaleIn 1.6s ease both infinite; }
@keyframes ScaleIn { 0%{ transform: scale(.2) translateY(40px); opacity:0;} 60%{ transform: scale(1.05); opacity:1;} 100%{ transform: scale(1) translateY(0); opacity:1;} }

Scale In Backward Top

Scale In Backward Top

/* CSS for: Scale In Backward Top */
.box-animation.Scale-In-Backward-Top h3 { animation: ScaleIn 1.6s ease both infinite; }
@keyframes ScaleIn { 0%{ transform: scale(.2) translateY(40px); opacity:0;} 60%{ transform: scale(1.05); opacity:1;} 100%{ transform: scale(1) translateY(0); opacity:1;} }

Scale In Forward Top

Scale In Forward Top

/* CSS for: Scale In Forward Top */
.box-animation.Scale-In-Forward-Top h3 { animation: ScaleIn 1.6s ease both infinite; }
@keyframes ScaleIn { 0%{ transform: scale(.2) translateY(40px); opacity:0;} 60%{ transform: scale(1.05); opacity:1;} 100%{ transform: scale(1) translateY(0); opacity:1;} }

Scale Out Horizontal-Center

Scale Out Horizontal-Center

/* CSS for: Scale Out Horizontal-Center */
.box-animation.Scale-Out-Horizontal-Center h3 { animation: ScaleOutHorizontalCenter 1.6s ease both infinite; transform-origin:center; }
@keyframes ScaleOutHorizontalCenter { 0%{ transform: scaleX(1); opacity:1;} 100%{ transform: scaleX(0); opacity:0;} }

Scale Out Horizontal-Left

Scale Out Horizontal-Left

/* CSS for: Scale Out Horizontal-Left */
.box-animation.Scale-Out-Horizontal-Left h3 { animation: ScaleOutHorizontalLeft 1.6s ease both infinite; transform-origin:left center; }
@keyframes ScaleOutHorizontalLeft { 0%{ transform: scaleX(1); opacity:1;} 100%{ transform: scaleX(0); translateX(-40px); opacity:0;} }

Scale Out Horizontal-Right

Scale Out Horizontal-Right

/* CSS for: Scale Out Horizontal-Right */
.box-animation.Scale-Out-Horizontal-Right h3 { animation: ScaleOutHorizontalRight 1.6s ease both infinite; transform-origin:right center; }
@keyframes ScaleOutHorizontalRight { 0%{ transform: scaleX(1); opacity:1;} 100%{ transform: scaleX(0); translateX(40px); opacity:0;} }

Scale Out Left

Scale Out Left

/* CSS for: Scale Out Left */
.box-animation.Scale-Out-Left h3 { animation: ScaleOutLeft 1.6s ease both infinite; transform-origin:left center; }
@keyframes ScaleOutLeft { 0%{ transform: scale(1) translateX(0); opacity:1;} 100%{ transform: scale(.2) translateX(-120px); opacity:0;} }

Scale Out Right

Scale Out Right

/* CSS for: Scale Out Right */
.box-animation.Scale-Out-Right h3 { animation: ScaleOutRight 1.6s ease both infinite; transform-origin:right center; }
@keyframes ScaleOutRight { 0%{ transform: scale(1) translateX(0); opacity:1;} 100%{ transform: scale(.2) translateX(120px); opacity:0;} }

Scale Out Top

Scale Out Top

/* CSS for: Scale Out Top */
.box-animation.Scale-Out-Top h3 { animation: ScaleOutTop 1.6s ease both infinite; transform-origin:center top; }
@keyframes ScaleOutTop { 0%{ transform: scale(1) translateY(0); opacity:1;} 100%{ transform: scale(0) translateY(-120px); opacity:0;} }

Scale Out Vertical-Bottom

Scale Out Vertical-Bottom

/* CSS for: Scale Out Vertical-Bottom */
.box-animation.Scale-Out-Vertical-Bottom h3 { animation: ScaleOutVerticalBottom 1.6s ease both infinite; transform-origin:center bottom; }
@keyframes ScaleOutVerticalBottom { 0%{ transform: scaleY(1); opacity:1;} 100%{ transform: scaleY(0); translateY(40px); opacity:0;} }

Scale Out Vertical-Center

Scale Out Vertical-Center

/* CSS for: Scale Out Vertical-Center */
.box-animation.Scale-Out-Vertical-Center h3 { animation: ScaleOutVerticalCenter 1.6s ease both infinite; transform-origin:center; }
@keyframes ScaleOutVerticalCenter { 0%{ transform: scaleY(1); opacity:1;} 100%{ transform: scaleY(0); opacity:0;} }

Scale Out Vertical-Top

Scale Out Vertical-Top

/* CSS for: Scale Out Vertical-Top */
.box-animation.Scale-Out-Vertical-Top h3 { animation: ScaleOutVerticalTop 1.6s ease both infinite; transform-origin:center top; }
@keyframes ScaleOutVerticalTop { 0%{ transform: scaleY(1); opacity:1;} 100%{ transform: scaleY(0); translateY(-40px); opacity:0;} }

Slide Out Bottom

Slide Out Bottom

/* CSS for: Slide Out Bottom */
.box-animation.Slide-Out-Bottom h3 { animation: SlideOutBottom 1.6s ease-in-out both infinite; }
@keyframes SlideOutBottom { 0%{ transform: translateY(0); opacity:1;} 100%{ transform: translateY(120%); opacity:0;} }

Scale Out Vertical-Bottom

Scale Out Vertical-Bottom

/* CSS for: Scale Out Vertical-Bottom */
.box-animation.Scale-Out-Vertical-Bottom h3 { animation: ScaleOutVerticalBottom 1.6s ease both infinite; transform-origin:center bottom; }
@keyframes ScaleOutVerticalBottom { 0%{ transform: scaleY(1); opacity:1;} 100%{ transform: scaleY(0); translateY(40px); opacity:0;} }

Frontend Hack

© Copyright 2025 all rights reserved | Design By Frontend-Hack