CSS Animation Effects - Complete Collection - Creativist Studio CSS Animation Effects: 100+ Complete Collection & Code Examples 2025

Scale Down (15 effets)

Scale Down Center

.scale-down-center:hover { transform: scale(0.5); }

Scale Down Top

.scale-down-top:hover { transform: scale(0.5); transform-origin: top center; }

Scale Down Bottom

.scale-down-bottom:hover { transform: scale(0.5); transform-origin: bottom center; }

Scale Down Left

.scale-down-left:hover { transform: scale(0.5); transform-origin: left center; }

Scale Down Right

.scale-down-right:hover { transform: scale(0.5); transform-origin: right center; }

Scale Down Bottom Left

.scale-down-bottom-left:hover { transform: scale(0.5); transform-origin: bottom left; }

Scale Down Bottom Right

.scale-down-bottom-right:hover { transform: scale(0.5); transform-origin: bottom right; }

Scale Down Top Left

.scale-down-top-left:hover { transform: scale(0.5); transform-origin: top left; }

Scale Down Top Right

.scale-down-top-right:hover { transform: scale(0.5); transform-origin: top right; }

Scale Down Horizontal Center

.scale-down-horizontal-center:hover { transform: scaleX(0.5); }

Scale Down Horizontal Left

.scale-down-horizontal-left:hover { transform: scaleX(0.5); transform-origin: left; }

Scale Down Horizontal Right

.scale-down-horizontal-right:hover { transform: scaleX(0.5); transform-origin: right; }

Scale Down Vertical Center

.scale-down-vertical-center:hover { transform: scaleY(0.5); }

Scale Down Vertical Top

.scale-down-vertical-top:hover { transform: scaleY(0.5); transform-origin: top; }

Scale Down Vertical Bottom

.scale-down-vertical-bottom:hover { transform: scaleY(0.5); transform-origin: bottom; }

Rotate (21 effets)

Rotate Center

.rotate-center:hover { transform: rotate(45deg); }

Rotate Top

.rotate-top:hover { transform: rotate(45deg); transform-origin: top center; }

Rotate Bottom

.rotate-bottom:hover { transform: rotate(45deg); transform-origin: bottom center; }

Rotate Right

.rotate-right:hover { transform: rotate(45deg); transform-origin: right center; }

Rotate Left

.rotate-left:hover { transform: rotate(45deg); transform-origin: left center; }

Rotate Top Right

.rotate-top-right:hover { transform: rotate(45deg); transform-origin: top right; }

Rotate Top Left

.rotate-top-left:hover { transform: rotate(45deg); transform-origin: top left; }

Rotate Bottom Left

.rotate-bottom-left:hover { transform: rotate(45deg); transform-origin: bottom left; }

Rotate Bottom Right

.rotate-bottom-right:hover { transform: rotate(45deg); transform-origin: bottom right; }

Rotate Horizontal Center

.rotate-horizontal-center:hover { transform: rotateX(45deg); }

Rotate Horizontal Top

.rotate-horizontal-top:hover { transform: rotateX(45deg); transform-origin: top; }

Rotate Horizontal Bottom

.rotate-horizontal-bottom:hover { transform: rotateX(45deg); transform-origin: bottom; }

Rotate Vertical Center

.rotate-vertical-center:hover { transform: rotateY(45deg); }

Rotate Vertical Left

.rotate-vertical-left:hover { transform: rotateY(45deg); transform-origin: left; }

Rotate Vertical Right

.rotate-vertical-right:hover { transform: rotateY(45deg); transform-origin: right; }

Rotate Diagonal Right

.rotate-diagonal-right:hover { transform: rotate3d(1,1,0,45deg); }

Rotate Diagonal Left

.rotate-diagonal-left:hover { transform: rotate3d(-1,1,0,45deg); }

Rotate Diagonal Top Right

.rotate-diagonal-top-right:hover { transform: rotate3d(1,1,0,45deg); transform-origin: top right; }

Rotate Diagonal Top Left

.rotate-diagonal-top-left:hover { transform: rotate3d(-1,1,0,45deg); transform-origin: top left; }

Rotate Diagonal Bottom Left

.rotate-diagonal-bottom-left:hover { transform: rotate3d(1,1,0,45deg); transform-origin: bottom left; }

Rotate Diagonal Bottom Right

.rotate-diagonal-bottom-right:hover { transform: rotate3d(-1,1,0,45deg); transform-origin: bottom right; }

Rotate & Scale (10 effets)

Rotate Scale Up

.rotate-scale-up:hover { transform: rotate(45deg) scale(1.1); }

Rotate Scale Down

.rotate-scale-down:hover { transform: rotate(45deg) scale(0.75); }

Rotate Scale Up Horizontal

.rotate-scale-up-horizontal:hover { transform: rotateX(45deg) scale(1.1); }

Rotate Scale Down Horizontal

.rotate-scale-down-horizontal:hover { transform: rotateX(45deg) scale(0.75); }

Rotate Scale Up Vertical

.rotate-scale-up-vertical:hover { transform: rotateY(45deg) scale(1.1); }

Rotate Scale Down Vertical

.rotate-scale-down-vertical:hover { transform: rotateY(45deg) scale(0.75); }

Rotate Scale Up Diagonal Left

.rotate-scale-up-diagonal-left:hover { transform: rotate3d(-1,1,0,45deg) scale(1.1); }

Rotate Scale Up Diagonal Right

.rotate-scale-up-diagonal-right:hover { transform: rotate3d(1,1,0,45deg) scale(1.1); }

Rotate Scale Down Diagonal Left

.rotate-scale-down-diagonal-left:hover { transform: rotate3d(-1,1,0,45deg) scale(0.75); }

Rotate Scale Down Diagonal Right

.rotate-scale-down-diagonal-right:hover { transform: rotate3d(1,1,0,45deg) scale(0.75); }

Swing (8 effets)

Swing Top

.swing-top:hover { transform: rotate(6deg); transform-origin: top; }

Swing Bottom

.swing-bottom:hover { transform: rotate(6deg); transform-origin: bottom; }

Swing Right

.swing-right:hover { transform: rotate(6deg); transform-origin: right; }

Swing Left

.swing-left:hover { transform: rotate(6deg); transform-origin: left; }

Swing Top Right

.swing-top-right:hover { transform: rotate(6deg); transform-origin: top right; }

Swing Top Left

.swing-top-left:hover { transform: rotate(6deg); transform-origin: top left; }

Swing Bottom Left

.swing-bottom-left:hover { transform: rotate(6deg); transform-origin: bottom left; }

Swing Bottom Right

.swing-bottom-right:hover { transform: rotate(6deg); transform-origin: bottom right; }

Slide (12 effets)

Slide Top

.slide-top:hover { transform: translateY(-1rem); }

Slide Bottom

.slide-bottom:hover { transform: translateY(1rem); }

Slide Left

.slide-left:hover { transform: translateX(-1rem); }

Slide Right

.slide-right:hover { transform: translateX(1rem); }

Slide Top Right

.slide-top-right:hover { transform: translate(1rem, -1rem); }

Slide Top Left

.slide-top-left:hover { transform: translate(-1rem, -1rem); }

Slide Bottom Right

.slide-bottom-right:hover { transform: translate(1rem, 1rem); }

Slide Bottom Left

.slide-bottom-left:hover { transform: translate(-1rem, 1rem); }

Slide Rotate Horizontal Top

.slide-rotate-horizontal-top:hover { transform: translateY(-1rem) rotateX(12deg); }

Slide Rotate Horizontal Bottom

.slide-rotate-horizontal-bottom:hover { transform: translateY(1rem) rotateX(-12deg); }

Slide Rotate Vertical Left

.slide-rotate-vertical-left:hover { transform: translateX(-1rem) rotateY(-12deg); }

Slide Rotate Vertical Right

.slide-rotate-vertical-right:hover { transform: translateX(1rem) rotateY(12deg); }

Shadow (9 effets)

Shadow Drop Center

.shadow-drop-center:hover { box-shadow: 0 0 20px 0 rgba(0,0,0,0.35); }

Shadow Drop Top

.shadow-drop-top:hover { box-shadow: 0 -12px 20px -12px rgba(0,0,0,0.35); }

Shadow Drop Right

.shadow-drop-right:hover { box-shadow: 12px 0 20px -12px rgba(0,0,0,0.35); }

Shadow Drop Bottom

.shadow-drop-bottom:hover { box-shadow: 0 12px 20px -12px rgba(0,0,0,0.35); }

Shadow Drop Left

.shadow-drop-left:hover { box-shadow: -12px 0 20px -12px rgba(0,0,0,0.35); }

Shadow Drop Top Right

.shadow-drop-top-right:hover { box-shadow: 12px -12px 20px -12px rgba(0,0,0,0.35); }

Shadow Drop Top Left

.shadow-drop-top-left:hover { box-shadow: -12px -12px 20px -12px rgba(0,0,0,0.35); }

Shadow Drop Bottom Right

.shadow-drop-bottom-right:hover { box-shadow: 12px 12px 20px -12px rgba(0,0,0,0.35); }

Shadow Drop Bottom Left

.shadow-drop-bottom-left:hover { box-shadow: -12px 12px 20px -12px rgba(0,0,0,0.35); }

Tracking (4 effets)

Tracking In Expand

.tracking-in-expand:hover { letter-spacing: 0.5em; }

Tracking In Contract

.tracking-in-contract:hover { letter-spacing: -0.1em; }

Tracking Out Expand

.tracking-out-expand:hover { letter-spacing: 0.5em; }

Tracking Out Contract

.tracking-out-contract:hover { letter-spacing: -0.1em; }

Blur (2 effets)

Blur In

.blur-in:hover { filter: blur(0px); }

Blur Out

.blur-out:hover { filter: blur(3px); }

Special (18 effets)

Vibrate

.vibrate:hover { animation: vibrate 0.4s; }

Shake Horizontal

.shake-horizontal:hover { animation: shake-horizontal 0.8s; }

Shake Vertical

.shake-vertical:hover { animation: shake-vertical 0.8s; }

Jello

.jello:hover { animation: jello 0.9s; }

Wobble

.wobble:hover { animation: wobble 1s; }

Bounce

.bounce:hover { animation: bounce 1s; }

Tada

.tada:hover { animation: tada 1s; }

Pulse

.pulse:hover { animation: pulse 1s; }

Rubber Band

.rubber-band:hover { animation: rubber-band 1s; }

Heart Beat

.heart-beat:hover { animation: heart-beat 1.3s ease-in-out infinite; }

Flash

.flash:hover { animation: flash 2s; }

Head Shake

.head-shake:hover { animation: head-shake 1s ease-in-out; }

Swing

.swing:hover { animation: swing 1s ease; }

Roll In

.roll-in:hover { animation: roll-in 1s ease-out; }

Roll Out

.roll-out:hover { animation: roll-out 1s ease-in; }

Zoom In

.zoom-in:hover { animation: zoom-in 1s; }

Zoom Out

.zoom-out:hover { animation: zoom-out 1s; }

CSS copié dans le presse-papiers!

First Method:
Add CSS via the Customizer

WordPress comes with an easy built-in way to add custom CSS (Cascading Style Sheets) in the Customizer.
To add custom CSS markup, go to your WordPress admin, and Appearance > Customize.
Click on the Additional CSS section, place your custom CSS code in the text area, and hit Publish.

kadence wordpress How do I add Custom CSS

Second Method:
Custom CSS in Block Settings

Custom CSS: Add CSS directly inside the Section Block using this Block Setting. Click on the Edit in Modal button above the Selector to view the CSS in a larger popup modal. Use the Selector rule to change the Section Block Styles when using Custom CSS.
For example:

`selector { color: #ffff; }`

Third Method:
Add and Preview Code in a Custom Block

Best for advanced users who want full control using a code block.
How-to:

Add a Code Block in your editor (Gutenberg or compatible plugin).
Insert your CSS code directly inside.
Preview changes live in the editor.
Ideal for scoped or experimental styles.

✨ CSS Animation Effects – 100+ Effets ✨