What's the difference between animation and transition?

Transitions require a trigger (like hover) and only animate between two states. Animations can run automatically, loop infinitely, and have multiple keyframe steps.

How do I make an animation loop forever?

Set `animation-iteration-count: infinite;`

Why does my animation jump back at the end?

You need `animation-fill-mode: forwards;` to retain the last keyframe styles.

Can I pause an animation on hover?

Yes: `.element:hover { animation-play-state: paused; }`

What's the best way to restart a CSS animation?

Remove and re-add the animation using JavaScript, or toggle a class that triggers a reflow.

CSS Animations - Learn HTML | Revochamp

Name: CSS Animations
Availability: InStock
Author: Revochamp

What are CSS Animations?

CSS animations allow you to create complex, multi-step animations using @keyframes. Unlike transitions which require triggers (like hover), animations can run automatically, loop infinitely, and have fine-grained control over each step of the animation sequence.

Basic Syntax

CSSRead-only

@keyframes slideIn {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.element {
  animation: slideIn 0.5s ease forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.element {
  animation: slideIn 0.5s ease forwards;
}

Keyframes with Percentages

CSSRead-only

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

.ball {
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

.ball {
  animation: bounce 1s ease-in-out infinite;
}

Animation Properties

Property	Description	Example
animation-name	Name of the @keyframes rule	bounce, fadeIn
animation-duration	Length of one cycle	0.5s, 2000ms
animation-timing-function	Speed curve	ease, linear, cubic-bezier()
animation-delay	Delay before start	0.2s, 1s
animation-iteration-count	Number of cycles	1, 3, infinite
animation-direction	Play direction	normal, reverse, alternate
animation-fill-mode	Styles before/after	none, forwards, backwards
animation-play-state	Pause or play	running, paused

Shorthand Syntax

CSSRead-only

/* name duration timing-function delay iteration-count direction fill-mode */
.element {
  animation: bounce 1s ease 0.2s infinite alternate forwards;
}

/* Multiple animations */
.element {
  animation: 
    slideIn 0.5s ease forwards,
    pulse 2s ease-in-out infinite 0.5s;
}

/* name duration timing-function delay iteration-count direction fill-mode */
.element {
  animation: bounce 1s ease 0.2s infinite alternate forwards;
}

/* Multiple animations */
.element {
  animation: 
    slideIn 0.5s ease forwards,
    pulse 2s ease-in-out infinite 0.5s;
}

Animation Directions

CSSRead-only

.normal {
  animation-direction: normal; /* 0% → 100% */
}

.reverse {
  animation-direction: reverse; /* 100% → 0% */
}

.alternate {
  animation-direction: alternate; /* 0% → 100% → 0% */
}

.alternate-reverse {
  animation-direction: alternate-reverse; /* 100% → 0% → 100% */
}

.normal {
  animation-direction: normal; /* 0% → 100% */
}

.reverse {
  animation-direction: reverse; /* 100% → 0% */
}

.alternate {
  animation-direction: alternate; /* 0% → 100% → 0% */
}

.alternate-reverse {
  animation-direction: alternate-reverse; /* 100% → 0% → 100% */
}

Fill Modes Explained

Value	Before Animation	After Animation
none	No styles	Reverts to original
forwards	No styles	Retains last keyframe
backwards	First keyframe	Reverts to original
both	First keyframe	Retains last keyframe

Practical Examples

CSSRead-only

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Fade in sequence for list items */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.list-item {
  opacity: 0;
  animation: fadeInUp 0.4s ease forwards;
}

.list-item:nth-child(1) { animation-delay: 0s; }
.list-item:nth-child(2) { animation-delay: 0.1s; }
.list-item:nth-child(3) { animation-delay: 0.2s; }

/* Pulsing notification badge */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.badge {
  animation: pulse 1.5s ease-in-out infinite;
}

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Fade in sequence for list items */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.list-item {
  opacity: 0;
  animation: fadeInUp 0.4s ease forwards;
}

.list-item:nth-child(1) { animation-delay: 0s; }
.list-item:nth-child(2) { animation-delay: 0.1s; }
.list-item:nth-child(3) { animation-delay: 0.2s; }

/* Pulsing notification badge */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.badge {
  animation: pulse 1.5s ease-in-out infinite;
}

Controlling Animation with JavaScript

JavaScriptRead-only

// Pause an animation
const element = document.querySelector('.element');
element.style.animationPlayState = 'paused';

// Resume
element.style.animationPlayState = 'running';

// Restart animation
function restartAnimation(el) {
  el.style.animation = 'none';
  el.offsetHeight; // Force reflow
  el.style.animation = null;
}

// Pause an animation
const element = document.querySelector('.element');
element.style.animationPlayState = 'paused';

// Resume
element.style.animationPlayState = 'running';

// Restart animation
function restartAnimation(el) {
  el.style.animation = 'none';
  el.offsetHeight; // Force reflow
  el.style.animation = null;
}

Animation Events

JavaScriptRead-only

const element = document.querySelector('.element');

element.addEventListener('animationstart', () => {
  console.log('Animation started');
});

element.addEventListener('animationiteration', () => {
  console.log('Animation repeated');
});

element.addEventListener('animationend', () => {
  console.log('Animation finished');
});

const element = document.querySelector('.element');

element.addEventListener('animationstart', () => {
  console.log('Animation started');
});

element.addEventListener('animationiteration', () => {
  console.log('Animation repeated');
});

element.addEventListener('animationend', () => {
  console.log('Animation finished');
});

Performance Best Practices

Animate transforms and opacity – These use compositor thread (GPU accelerated)
Avoid animating layout properties – width, height, margin, padding trigger reflows
Use will-change property – Hints browser to optimize: will-change: transform;
Keep animations under 60fps – Test with Chrome DevTools → Performance tab
Respect prefers-reduced-motion – Provide accessible alternatives

Accessibility: Reduced Motion

CSSRead-only

@keyframes subtlePulse {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

/* Full animation by default */
.animated {
  animation: bounce 1s ease infinite;
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: subtlePulse 2s ease infinite;
  }
}

@keyframes subtlePulse {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

/* Full animation by default */
.animated {
  animation: bounce 1s ease infinite;
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: subtlePulse 2s ease infinite;
  }
}

Animation vs Transition Comparison

Feature	Transitions	Animations
Trigger Required	Yes (hover, focus, class change)	No (can auto-start)
Keyframes	Only start/end (from/to)	Multiple steps (0% to 100%)
Looping	No (single cycle)	Yes (infinite)
Control	Simple	Fine-grained
Best For	Interactive feedback	Decorative/loading animations

Common Mistakes

Animating too many properties – Hurts performance
Too long durations – Frustrating for users (loading spinners excepted)
Forgetting fill-mode – Animations jump back to start without forwards
Not testing on real devices – Desktop smooth ≠ mobile smooth
Ignoring accessibility – Motion sensitivity is real

Conclusion

CSS animations bring websites to life with smooth, performant motion. They're perfect for loading indicators, entrance animations, attention-grabbing effects, and interactive storytelling. Combine with transforms and opacity for the best performance, and always respect reduced motion preferences.

What are CSS Animations?

Basic Syntax

CSSRead-only

@keyframes slideIn {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.element {
  animation: slideIn 0.5s ease forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.element {
  animation: slideIn 0.5s ease forwards;
}

Keyframes with Percentages

CSSRead-only

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

.ball {
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

.ball {
  animation: bounce 1s ease-in-out infinite;
}

Animation Properties

Property	Description	Example
animation-name	Name of the @keyframes rule	bounce, fadeIn
animation-duration	Length of one cycle	0.5s, 2000ms
animation-timing-function	Speed curve	ease, linear, cubic-bezier()
animation-delay	Delay before start	0.2s, 1s
animation-iteration-count	Number of cycles	1, 3, infinite
animation-direction	Play direction	normal, reverse, alternate
animation-fill-mode	Styles before/after	none, forwards, backwards
animation-play-state	Pause or play	running, paused

Shorthand Syntax

CSSRead-only

/* name duration timing-function delay iteration-count direction fill-mode */
.element {
  animation: bounce 1s ease 0.2s infinite alternate forwards;
}

/* Multiple animations */
.element {
  animation: 
    slideIn 0.5s ease forwards,
    pulse 2s ease-in-out infinite 0.5s;
}

/* name duration timing-function delay iteration-count direction fill-mode */
.element {
  animation: bounce 1s ease 0.2s infinite alternate forwards;
}

/* Multiple animations */
.element {
  animation: 
    slideIn 0.5s ease forwards,
    pulse 2s ease-in-out infinite 0.5s;
}

Animation Directions

CSSRead-only

.normal {
  animation-direction: normal; /* 0% → 100% */
}

.reverse {
  animation-direction: reverse; /* 100% → 0% */
}

.alternate {
  animation-direction: alternate; /* 0% → 100% → 0% */
}

.alternate-reverse {
  animation-direction: alternate-reverse; /* 100% → 0% → 100% */
}

.normal {
  animation-direction: normal; /* 0% → 100% */
}

.reverse {
  animation-direction: reverse; /* 100% → 0% */
}

.alternate {
  animation-direction: alternate; /* 0% → 100% → 0% */
}

.alternate-reverse {
  animation-direction: alternate-reverse; /* 100% → 0% → 100% */
}

Fill Modes Explained

Value	Before Animation	After Animation
none	No styles	Reverts to original
forwards	No styles	Retains last keyframe
backwards	First keyframe	Reverts to original
both	First keyframe	Retains last keyframe

Practical Examples

CSSRead-only

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Fade in sequence for list items */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.list-item {
  opacity: 0;
  animation: fadeInUp 0.4s ease forwards;
}

.list-item:nth-child(1) { animation-delay: 0s; }
.list-item:nth-child(2) { animation-delay: 0.1s; }
.list-item:nth-child(3) { animation-delay: 0.2s; }

/* Pulsing notification badge */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.badge {
  animation: pulse 1.5s ease-in-out infinite;
}

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Fade in sequence for list items */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.list-item {
  opacity: 0;
  animation: fadeInUp 0.4s ease forwards;
}

.list-item:nth-child(1) { animation-delay: 0s; }
.list-item:nth-child(2) { animation-delay: 0.1s; }
.list-item:nth-child(3) { animation-delay: 0.2s; }

/* Pulsing notification badge */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.badge {
  animation: pulse 1.5s ease-in-out infinite;
}

Controlling Animation with JavaScript

JavaScriptRead-only

// Pause an animation
const element = document.querySelector('.element');
element.style.animationPlayState = 'paused';

// Resume
element.style.animationPlayState = 'running';

// Restart animation
function restartAnimation(el) {
  el.style.animation = 'none';
  el.offsetHeight; // Force reflow
  el.style.animation = null;
}

// Pause an animation
const element = document.querySelector('.element');
element.style.animationPlayState = 'paused';

// Resume
element.style.animationPlayState = 'running';

// Restart animation
function restartAnimation(el) {
  el.style.animation = 'none';
  el.offsetHeight; // Force reflow
  el.style.animation = null;
}

Animation Events

JavaScriptRead-only

const element = document.querySelector('.element');

element.addEventListener('animationstart', () => {
  console.log('Animation started');
});

element.addEventListener('animationiteration', () => {
  console.log('Animation repeated');
});

element.addEventListener('animationend', () => {
  console.log('Animation finished');
});

const element = document.querySelector('.element');

element.addEventListener('animationstart', () => {
  console.log('Animation started');
});

element.addEventListener('animationiteration', () => {
  console.log('Animation repeated');
});

element.addEventListener('animationend', () => {
  console.log('Animation finished');
});

Performance Best Practices

Animate transforms and opacity – These use compositor thread (GPU accelerated)
Avoid animating layout properties – width, height, margin, padding trigger reflows
Use will-change property – Hints browser to optimize: will-change: transform;
Keep animations under 60fps – Test with Chrome DevTools → Performance tab
Respect prefers-reduced-motion – Provide accessible alternatives

Accessibility: Reduced Motion

CSSRead-only

@keyframes subtlePulse {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

/* Full animation by default */
.animated {
  animation: bounce 1s ease infinite;
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: subtlePulse 2s ease infinite;
  }
}

@keyframes subtlePulse {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

/* Full animation by default */
.animated {
  animation: bounce 1s ease infinite;
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: subtlePulse 2s ease infinite;
  }
}

Animation vs Transition Comparison

Feature	Transitions	Animations
Trigger Required	Yes (hover, focus, class change)	No (can auto-start)
Keyframes	Only start/end (from/to)	Multiple steps (0% to 100%)
Looping	No (single cycle)	Yes (infinite)
Control	Simple	Fine-grained
Best For	Interactive feedback	Decorative/loading animations

Common Mistakes

Animating too many properties – Hurts performance
Too long durations – Frustrating for users (loading spinners excepted)
Forgetting fill-mode – Animations jump back to start without forwards
Not testing on real devices – Desktop smooth ≠ mobile smooth
Ignoring accessibility – Motion sensitivity is real

What are CSS Animations?

Basic Syntax

Keyframes with Percentages

Animation Properties

Shorthand Syntax

Animation Directions

Fill Modes Explained

Practical Examples

Controlling Animation with JavaScript

Animation Events

Performance Best Practices

Accessibility: Reduced Motion

Animation vs Transition Comparison

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

What are CSS Animations?

Basic Syntax

Keyframes with Percentages

Animation Properties

Shorthand Syntax

Animation Directions

Fill Modes Explained

Practical Examples

Controlling Animation with JavaScript

Animation Events

Performance Best Practices

Accessibility: Reduced Motion

Animation vs Transition Comparison

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions