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.
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.
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.
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.
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.
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.
Beautiful color transitions
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.
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.
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.
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.