This is a slide-in animation

Slide with snapping effect and multiple scaling steps

Slide with zoom effect and blur

Slide with distortion, blur, and fade

Triple parallax effect with sliding and scaling

Bouncy sliding with scaling and opacity change

A spiral motion with scale and rotation

This animation slides in from the left and fades in.

This animation slides in from the bottom, scales, and fades in.

This animation slides in from the right with scaling and fading.

This animation scales down, fades, and slides out downward.

This animation slides up, scales up, and fades in.

This animation slides in from the top with scaling and fading.

This animation bounces up, fades, and slides down with scaling.

This animation slides in from the right, scales up, and slides out to the left.

This animation slides in from the left, bounces, scales, and fades.

This is an animation where the element scales down, fades, and slides out downward.

This is an animation where the element scales up, fades in, and slides in from below.

This is a slide-out animation

This is a slide-up animation

This is a slide-down animation

This is a slide-in from the top with expansion animation

This is a slide-in from the left with expansion animation

This is a diagonal slide animation

This animation combines sliding and fading

This animation adds a bounce effect to the slide

This animation combines sliding with a zoom effect

This is a slow slide-in animation with a smooth finish

This animation combines sliding with a spin effect

This is a bouncing animation

This is an upward bounce animation

This animation creates a horizontal bouncing effect

This animation bounces with a slight rotation

This animation creates a squishy bounce effect

This animation bounces diagonally

This animation combines bouncing with pulsing

This animation bounces in random directions

This is a fade-in animation

This is a fade-out animation

This is a fade-in and fade-out loop animation

This animation fades in while sliding up

This animation fades in while sliding down

This animation fades in with a subtle rotation

This animation fades in with a slight zoom effect

This animation creates a blinking fade effect

This animation fades in while moving diagonally

This is a zoom-in animation

This is a zoom-out animation

This animation zooms in with a bouncing effect

This animation creates a pulsating zoom effect

This animation zooms in with a twist

This is a zoom-in vertically and horizontally

This animation zooms in with a flash effect

This animation zooms and wobbles simultaneously

This animation zooms in with a 3D rotation

This animation zooms in with an elastic effect

This animation zooms in with a bounce effect.

This animation zooms out with an elastic effect and fades away.

This animation zooms in with a shadow effect.

This animation zooms in while rotating 360 degrees.

This animation zooms in and flips around the Y-axis.

This animation zooms in with a 3D perspective effect.

This animation zooms in with a waving effect and fades in.

This animation zooms in with staggered scaling and opacity changes.

This animation zooms in and flips out with a 360-degree rotation.

This animation zooms out with a pulsing effect.

This animation zooms in with a 3D effect and expands from the center.

This is a clockwise rotation animation

This is a counterclockwise rotation animation

This animation swings back and forth like a pendulum

This animation rotates while zooming in and out

This animation rotates while bouncing vertically

This animation rotates while moving diagonally

This animation rotates with an elastic effect

This animation rotates and cycles through background colors

This animation rotates in 3D space along both X and Y axes

This animation rotates with a twist effect, scaling in and out

This animation rotates while fading in and out, creating a ripple effect

This animation rotates while pulsing in size, creating a rhythmic effect

This animation rotates with a zigzag motion across the X-axis

This animation creates a swing-like motion, gently rotating back and forth

This animation flips the element back and forth like a card

This is a glowing text animation

This is a sliding text animation

This creates a wave-like effect where the text moves up and down.

This animation cycles through a rainbow of colors for the text.

Increase Text Size

This makes the text's shadow sweep around for a dynamic effect.

This is a flip X animation

This is a flip Y animation

This animation flips diagonally across X and Y axes.

This animation flips the element on the Z-axis for a spinning effect.

This animation flips along the X-axis with a bouncing effect.

This animation simulates a cube rotating along the Y-axis.

This animation performs a 3D flip along all three axes.

This animation combines flipping on the X-axis with a zooming effect.

This animation flips along the Y-axis with a glowing box-shadow effect.

This is a pulsing animation

This is a fast pulsing animation

This pulsing animation includes a glowing effect.

This animation changes the element's color while pulsing.

This animation adds a slight rotation during the pulse.

This pulsing animation moves the element diagonally during the pulse.

This animation expands the element's border while pulsing.

This animation makes the box shadow spread out while pulsing.

This animation adds a circular effect during the pulse.

This animation grows and shrinks the border from transparent to a thicker yellow border

This animation blinks the border from none to a red border and back

This animation draws a border from the left side of the element.

This animation creates a border from the top side of the element.

This animation creates a wave effect by sequentially adding borders to each side.

This animation shifts the border colors in a smooth cycle, giving a dynamic, colorful effect.

This animation makes the border pulse, expanding and contracting in size while alternating colors.

This animation causes the border to bounce in by progressively appearing from each side.

This animation shakes the box-shadow, creating a dramatic shadow effect around the border.

This animation waves the borders in a circular motion, while dynamically changing the border-radius to create a 3D effect.

This animation flashes the border while also applying a glowing effect to make it stand out.

This animation moves the box-shadow around the element, creating a dancing effect.

This animation shifts the perspective, creating a 3D tilting effect.

This animation creates a smooth pulsing skew effect along the X-axis.

This animation flips the element slightly with a skew effect along the Y-axis.

This animation rotates the element smoothly in 3D space along both axes.

This animation slides the element while applying a skew effect.

This animation spins the element like a cube on the Y-axis.

This animation zooms the element in and out in 3D space using perspective.

This animation combines a skew effect with a pop-like scaling effect.

This animation tilts the element in a smooth wave motion.

This animation adds a glowing effect to the element as it skews along the X-axis.

This animation combines a 3D flip with a skew effect and a bounce-like movement.

This animation causes the box shadow to pulse, growing and shrinking like a glowing effect.

This animation makes the box shadow swing side to side like it's moving back and forth.

This animation makes the box shadow grow from the element's center, expanding outward for a glowing effect.

This animation flickers the box shadow in and out, creating a dynamic, light-flashing effect.

This animation makes the box shadow bounce vertically, creating the illusion that the element is bouncing.

This animation smoothly changes the color of the box shadow, creating a transition between different colors.

This animation alternates between a normal and inset box shadow, creating a dynamic, inward and outward effect.

This animation makes the box shadow glow inward with a pulsating red effect, creating an atmospheric appearance.

This animation oscillates the inset shadow diagonally, creating a dynamic, shifting light effect.

This animation creates a pulsing background color effect

This animation gradually changes the background color

This animation applies a blur effect to the background

This animation creates a waving striped texture pattern

This animation shifts a gradient texture across the background

This animation creates a grid texture with a pulsing effect

This animation creates a noise-like effect using a repeating linear gradient

This animation creates a dynamic diagonal line texture

This animation creates a mosaic-like pattern with alternating colors

This animation creates a floating bubble effect using radial gradients

A wavy background pattern that animates in a rippling effect.

A flip effect applied to a mosaic pattern that dynamically adjusts its grid size.

Animation CSS

/* Select an animation to view its CSS */

Understanding CSS Keyframes

What Are Keyframes?

Keyframes in CSS allow you to define intermediary steps for animations, enabling smooth transitions between multiple states. By specifying styles at certain points (percentages) within the animation's duration, you can create complex animations.

@keyframes example {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

How to Use Keyframes

After defining keyframes, use the animation property to apply them to an element.

div {
  animation: example 2s ease-in-out infinite;
}

The animation shorthand consists of the following properties:

Property	Description
`animation-name`	The name of the keyframes block.
`animation-duration`	How long the animation takes (e.g., `2s`).
`animation-timing-function`	Controls the speed curve (e.g., `ease-in`).
`animation-delay`	Delay before starting the animation.
`animation-iteration-count`	Number of times to play (or `infinite`).
`animation-direction`	Normal, reverse, alternate, etc.
`animation-fill-mode`	Determines the styles before and after the animation runs.
`animation-play-state`	Running or paused.

Here is an example using all animation properties:

@keyframes exampleAnimation {
  0% { transform: translateX(0); opacity: 0; }
  50% { transform: translateX(100px); opacity: 0.5; }
  100% { transform: translateX(200px); opacity: 1; }
}

div {
  animation: exampleAnimation 2s ease-in-out 1s infinite alternate forwards;
  /* animation-name: exampleAnimation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards; */
}

Common Settings

Here are some common settings for CSS animations:

Category	Values
Timing Functions	`ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`, and custom `cubic-bezier` values.
Directions	`normal` (default), `reverse`, `alternate`, `alternate-reverse`.
Fill Modes	`none`, `forwards`, `backwards`, `both`.

Latest Blogs

The Future of Web Animations

Dive into the latest advancements in CSS animations.

2025-01-10

How to Master CSS Keyframes

Learn how to use CSS keyframes to create seamless, high-performance animations.

2025-01-11

A Deep Dive into CSS Transitions: When to Use Them vs. Keyframes

Understand the difference between CSS transitions and keyframes.

2025-01-12

Accessibility in Web Animations

Learn how to make your web animations accessible to all users.

2025-01-13

Top 10 Tools for Creating Stunning CSS Animations

Explore the best tools for creating and testing CSS animations.

2025-01-14

CSS Animations with JavaScript

Take your animations to the next level by integrating CSS with JavaScript for interactive, dynamic effects.

2025-01-15

Creating Complex Layout Transitions

Learn how to animate CSS Grid layouts to create engaging, dynamic web designs.

2025-01-16

CSS Animations for Mobile

Ensure your CSS animations run smoothly on mobile devices by following best practices for performance.

2025-01-17

CSS Animation Delays and Duration for Precise Timing

Get to know how to control the timing of your animations using delays and duration for better user experience.

2025-01-18

CSS Animations for Accessibility

Learn how to create animations that are both engaging and accessible for all users, including those with disabilities.

2025-01-19

Best Browser Extensions for Website Styling

Discover the best browser extensions that help web developers with styling, testing, and enhancing their websites, including QuickStyle.

2025-01-20

CSS Animations: From Concept to Implementation

Understand the process of creating and implementing CSS animations for modern web design.