Back to All Snippets

Animations

CSS and JavaScript animations

10 snippets found

Typewriter Effect

Text appears as if being typed

A typewriter animation that reveals text character by character with a blinking cursor. Uses a combination of width animation and steps() timing function to create the typing effect. Perfect for hero sections, code demos, or terminal-style interfaces.

csstexttypewriter
This text appears as if being typed...

Slide Up Animation

Element slides up from below

This animation combines a vertical slide with a fade-in effect, creating a dynamic entrance. Elements appear to rise from below while fading into view. Commonly used for cards, modals, or notification toasts to draw attention without being jarring.

cssslideentrance
This element slides up smoothly

Shake Animation

Shake effect for errors or alerts

A rapid horizontal shake animation commonly used for error states, invalid inputs, or to indicate something went wrong. The quick back-and-forth motion naturally draws the eye and communicates that user action is needed, like a physical "no" gesture.

cssshakeerror
❌ Invalid input

Rotate Animation

Continuous rotation effect

An infinite rotation animation perfect for loading spinners, refresh icons, or decorative elements. Uses a linear timing function for consistent speed throughout the rotation. Commonly paired with SVG icons or font awesome symbols for loading indicators.

cssrotateloading
⚙️

Pulse Animation

Pulsing scale effect for emphasis

A subtle pulsing animation that gently scales elements up and down. Excellent for drawing attention to notifications, live indicators, or important buttons without being too aggressive. The smooth transition creates a breathing effect that feels natural.

csspulseattention

Gradient Animation

Animated gradient background

An animated gradient that smoothly transitions between multiple colors by animating the background-position property. Creates a vibrant, modern effect perfect for hero sections, cards, or call-to-action buttons. The large background size enables smooth movement.

cssgradientbackground
Animated Gradient

Beautiful color transitions

Glow Effect

Pulsing glow animation

A pulsing glow effect that animates box-shadow intensity and spread. Creates a luminous, eye-catching effect perfect for highlighting active elements, premium features, or notification indicators. The smooth shadow transition creates depth and draws attention.

cssglowshadow

Flip Card Animation

3D card flip effect on hover

A 3D flip animation that rotates a card 180 degrees on the Y-axis, revealing content on the back. Uses CSS transforms and perspective to create a realistic 3D effect. Perfect for profile cards, product showcases, or interactive information displays.

css3dinteractive
Hover me!
Back Side

Fade In Animation

Smooth fade-in effect for elements

A simple yet elegant fade-in animation that gradually increases opacity from 0 to 1. Perfect for revealing content, modals, or tooltips. The animation is smooth and non-intrusive, creating a professional feel without overwhelming the user.

cssfadeentrance
This content fades in smoothly

Bounce Animation

Playful bouncing effect

A playful bounce animation that simulates a ball bouncing effect using cubic-bezier timing. Creates an energetic, attention-grabbing motion perfect for call-to-action buttons, success messages, or gamified interfaces. The easing function gives it realistic physics.

cssbounceplayful
⬇️ Bouncing element