Animation Examples

CSS animations allow you to create smooth, complex movements and transitions between styles. Click the play button to see each animation in action, or the edit button to customize the keyframes!

Bounce

Rotate

Pulse

Shake

Scale

Color

Slide

Fade

Flip

Swing

Wobble

Jello

Hinge

Roll

Zoom

Expand

Glitch

Ripple

Squeeze

Flicker

Orbit

Bounce-In

Reveal

Spiral

How to Use These Animations in Your Own Code

Copy the CSS: Click the edit button (pencil icon) next to the animation you want to use. This will open a modal with the CSS code for that animation.
Create a CSS file: In your project, create a new CSS file (e.g., animations.css) or use an existing one.
Paste the keyframes: Copy the entire @keyframes rule from the modal and paste it into your CSS file.

Apply the animation: To use the animation on an element, add a class to that element and define the animation properties in your CSS. For example:


  .my-animated-element {
	animation-name: bounce; /* Use the name of the keyframes you copied */
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
  }

Customize: Feel free to adjust the animation properties (duration, timing-function, etc.) to suit your needs. You can also modify the keyframes to create variations of the animation.
Browser prefixes: For better browser compatibility, consider adding vendor prefixes (@-webkit-keyframes, @-moz-keyframes, etc.) or use a CSS autoprefixer tool.

Tip: Remember to test your animations across different browsers and devices to ensure consistent behavior. Also, consider providing alternatives for users who prefer reduced motion.

Animation Controls

Duration: 1s

Delay: 0s

Iteration Count

Direction

Fill Mode

Dive deeper into CSS animations with these recommended books 📚🎨🚀

CSS Animations and Transitions for the Modern Web

This book covers everything from basic transitions to complex, custom animations. Learn how to create engaging user experiences with CSS animations.

Transitions and Animations in CSS

A comprehensive guide to creating animations with CSS. This book covers keyframe animations, transitions, and even touches on related technologies like SVG and JavaScript.

CSS Pocket Reference: Visual Presentation for the Web

While not exclusively about animations, this pocket reference includes a section on CSS animations and transitions, making it a handy resource for quick lookups.

Test Your CSS Animation Knowledge

Question 1/3

Which CSS property is used to specify the animation name?

CSS Animation Trivia

CSS animations were first introduced in CSS3, which became a W3C Recommendation in 2011.
The 'animation-fill-mode' property determines how an element should look before and after the animation.
You can animate SVG properties with CSS, allowing for complex and scalable animations.
The '@keyframes' rule was inspired by Adobe Flash's timeline animation system.
CSS animations can be more performance-efficient than JavaScript animations for simple transitions.
The 'will-change' property can be used to optimize animation performance by hinting to the browser what's going to change.
You can pause and play CSS animations using JavaScript by manipulating the 'animation-play-state' property.
CSS animations can be used to create parallax scrolling effects without JavaScript.
The 'steps()' timing function allows you to create frame-by-frame animations using CSS.
CSS animations can be used to create loading spinners and progress bars without any images or JavaScript.

Native CSS Animations Tutorial

You won't find any silly big frameworks here. Just copy & paste the code and you are ready.