CSS Animations

Create complex, keyframe-based animations with CSS to bring your web pages to life with smooth, engaging motion effects.

CSS animations allow you to create complex, multi-step animations without JavaScript. Unlike transitions which animate between two states, animations can have multiple keyframes and run automatically.

What are CSS Animations?

CSS animations consist of two parts:

Keyframes - Define the animation sequence
Animation properties - Control how the animation runs

Defining Keyframes

Use @keyframes to define the animation sequence:

@keyframes animationName {
  from {
    /* Starting state */
    opacity: 0;
  }
  to {
    /* Ending state */
    opacity: 1;
  }
}

/* Or with percentages */
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}

Animation Properties

animation-name

Specifies which keyframe animation to use:

.element {
  animation-name: slideIn;
}

animation-duration

How long the animation takes:

.element {
  animation-duration: 2s; /* 2 seconds */
  animation-duration: 500ms; /* 500 milliseconds */
}

animation-timing-function

Controls the speed curve:

.element {
  animation-timing-function: ease; /* Default */
  animation-timing-function: linear;
  animation-timing-function: ease-in;
  animation-timing-function: ease-out;
  animation-timing-function: ease-in-out;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

animation-delay

Delay before animation starts:

.element {
  animation-delay: 0s; /* No delay (default) */
  animation-delay: 1s; /* Wait 1 second */
  animation-delay: -0.5s; /* Start halfway through */
}

animation-iteration-count

Number of times to repeat:

.element {
  animation-iteration-count: 1; /* Once (default) */
  animation-iteration-count: 3; /* Three times */
  animation-iteration-count: infinite; /* Forever */
}

animation-direction

Direction of animation playback:

.element {
  animation-direction: normal; /* Forward (default) */
  animation-direction: reverse; /* Backward */
  animation-direction: alternate; /* Forward then backward */
  animation-direction: alternate-reverse; /* Backward then forward */
}

animation-fill-mode

Styles before/after animation:

.element {
  animation-fill-mode: none; /* Default */
  animation-fill-mode: forwards; /* Keep end state */
  animation-fill-mode: backwards; /* Use start state during delay */
  animation-fill-mode: both; /* Both forwards and backwards */
}

animation-play-state

Control playback:

.element {
  animation-play-state: running; /* Default */
  animation-play-state: paused; /* Paused */
}

.element:hover {
  animation-play-state: paused; /* Pause on hover */
}

Shorthand Syntax

.element {
  /* name duration timing-function delay iteration-count direction fill-mode */
  animation: slideIn 2s ease-in-out 0s infinite alternate forwards;
  
  /* Multiple animations */
  animation: fadeIn 1s ease, slideIn 1s ease 0.5s;
}

Practical Examples

Fade In Animation

<!DOCTYPE html>
<html>
<head>
<style>
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .fade-in {
    animation: fadeIn 1s ease-in;
  }
</style>
</head>
<body>
  <div class="fade-in">
    <h1>This fades in!</h1>
  </div>
</body>
</html>

Slide In from Left

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

.slide-in-left {
  animation: slideInLeft 0.6s ease-out;
}

Bounce Animation

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.bounce {
  animation: bounce 2s ease infinite;
}

Rotating Loader

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: rotate 1s linear infinite;
}

Pulse Effect

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

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

Shake Animation

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

.shake {
  animation: shake 0.5s ease;
}

Complex Animations

Typewriter Effect

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

.typewriter {
  font-family: monospace;
  overflow: hidden;
  border-right: 0.15em solid #333;
  white-space: nowrap;
  /* steps(40) creates a stepped animation with 40 discrete steps
     instead of smooth animation, mimicking typing character-by-character */
  animation: typing 3.5s steps(40) 1s forwards,
             blink 0.75s step-end infinite;
}

Floating Animation

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

.floating {
  animation: float 3s ease-in-out infinite;
}

Background Gradient Animation

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animated-gradient {
  background: linear-gradient(45deg, #3498db, #e74c3c, #2ecc71);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

Card Flip

@keyframes flip {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(180deg);
  }
}

.card {
  animation: flip 0.6s ease;
  transform-style: preserve-3d;
}

Multiple Animations

Apply multiple animations to one element:

.element {
  animation: 
    fadeIn 1s ease,
    slideUp 1s ease,
    rotate 2s linear infinite;
}

Animation Events (JavaScript)

Listen for animation events:

<style>
  @keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }
  
  .animated {
    animation: slideIn 1s ease;
  }
</style>

<script>
  const element = document.querySelector('.animated');
  
  element.addEventListener('animationstart', () => {
    console.log('Animation started');
  });
  
  element.addEventListener('animationend', () => {
    console.log('Animation ended');
  });
  
  element.addEventListener('animationiteration', () => {
    console.log('Animation repeated');
  });
</script>

Performance Optimization

Animation Performance

Best performance: Animate transform and opacity (GPU-accelerated)
Avoid: Animating width, height, top, left (cause reflow)
Use will-change for complex animations (sparingly)
Keep animations under 60fps
Test on lower-end devices
Use transform: translate3d() to trigger GPU acceleration

.optimized-animation {
  /* Tell browser to optimize this property */
  will-change: transform;
  
  /* Use 3D transform for GPU acceleration */
  transform: translate3d(0, 0, 0);
}

Accessibility

Respect user motion preferences:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Common Patterns

Loading Dots

@keyframes dot-pulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

.dot {
  animation: dot-pulse 1.4s infinite;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

Skeleton Loading

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

Notification Badge

@keyframes badge-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

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

Best Practices

Animation Best Practices

Keep animations purposeful and subtle
Use appropriate durations (0.2-0.5s for UI, 1-3s for attention)
Provide pause controls for long animations
Test animations on different devices
Consider accessibility and motion sensitivity
Use animation-fill-mode: forwards to maintain end state
Combine with transitions for best results
Document complex animation sequences

Browser Support

CSS animations have excellent browser support. Use vendor prefixes for older browsers:

@-webkit-keyframes slideIn {
  /* Webkit browsers */
}

@keyframes slideIn {
  /* Standard */
}

.element {
  -webkit-animation: slideIn 1s ease;
  animation: slideIn 1s ease;
}

CSS animations are powerful tools for creating engaging, professional web experiences. Use them wisely to enhance user experience without overwhelming your visitors!

What are CSS Animations?

CSS animations consist of two parts:

Keyframes - Define the animation sequence
Animation properties - Control how the animation runs

Defining Keyframes

Use @keyframes to define the animation sequence:

@keyframes animationName {
  from {
    /* Starting state */
    opacity: 0;
  }
  to {
    /* Ending state */
    opacity: 1;
  }
}

/* Or with percentages */
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}

Animation Properties

animation-name

Specifies which keyframe animation to use:

.element {
  animation-name: slideIn;
}

animation-duration

How long the animation takes:

.element {
  animation-duration: 2s; /* 2 seconds */
  animation-duration: 500ms; /* 500 milliseconds */
}

animation-timing-function

Controls the speed curve:

.element {
  animation-timing-function: ease; /* Default */
  animation-timing-function: linear;
  animation-timing-function: ease-in;
  animation-timing-function: ease-out;
  animation-timing-function: ease-in-out;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

animation-delay

Delay before animation starts:

.element {
  animation-delay: 0s; /* No delay (default) */
  animation-delay: 1s; /* Wait 1 second */
  animation-delay: -0.5s; /* Start halfway through */
}

animation-iteration-count

Number of times to repeat:

.element {
  animation-iteration-count: 1; /* Once (default) */
  animation-iteration-count: 3; /* Three times */
  animation-iteration-count: infinite; /* Forever */
}

animation-direction

Direction of animation playback:

.element {
  animation-direction: normal; /* Forward (default) */
  animation-direction: reverse; /* Backward */
  animation-direction: alternate; /* Forward then backward */
  animation-direction: alternate-reverse; /* Backward then forward */
}

animation-fill-mode

Styles before/after animation:

.element {
  animation-fill-mode: none; /* Default */
  animation-fill-mode: forwards; /* Keep end state */
  animation-fill-mode: backwards; /* Use start state during delay */
  animation-fill-mode: both; /* Both forwards and backwards */
}

animation-play-state

Control playback:

.element {
  animation-play-state: running; /* Default */
  animation-play-state: paused; /* Paused */
}

.element:hover {
  animation-play-state: paused; /* Pause on hover */
}

Shorthand Syntax

.element {
  /* name duration timing-function delay iteration-count direction fill-mode */
  animation: slideIn 2s ease-in-out 0s infinite alternate forwards;
  
  /* Multiple animations */
  animation: fadeIn 1s ease, slideIn 1s ease 0.5s;
}

Practical Examples

Fade In Animation

<!DOCTYPE html>
<html>
<head>
<style>
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .fade-in {
    animation: fadeIn 1s ease-in;
  }
</style>
</head>
<body>
  <div class="fade-in">
    <h1>This fades in!</h1>
  </div>
</body>
</html>

Slide In from Left

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

.slide-in-left {
  animation: slideInLeft 0.6s ease-out;
}

Bounce Animation

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.bounce {
  animation: bounce 2s ease infinite;
}

Rotating Loader

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: rotate 1s linear infinite;
}

Pulse Effect

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

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

Shake Animation

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

.shake {
  animation: shake 0.5s ease;
}

Complex Animations

Typewriter Effect

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

.typewriter {
  font-family: monospace;
  overflow: hidden;
  border-right: 0.15em solid #333;
  white-space: nowrap;
  /* steps(40) creates a stepped animation with 40 discrete steps
     instead of smooth animation, mimicking typing character-by-character */
  animation: typing 3.5s steps(40) 1s forwards,
             blink 0.75s step-end infinite;
}

Floating Animation

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

.floating {
  animation: float 3s ease-in-out infinite;
}

Background Gradient Animation

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animated-gradient {
  background: linear-gradient(45deg, #3498db, #e74c3c, #2ecc71);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

Card Flip

@keyframes flip {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(180deg);
  }
}

.card {
  animation: flip 0.6s ease;
  transform-style: preserve-3d;
}

Multiple Animations

Apply multiple animations to one element:

.element {
  animation: 
    fadeIn 1s ease,
    slideUp 1s ease,
    rotate 2s linear infinite;
}

Animation Events (JavaScript)

Listen for animation events:

<style>
  @keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }
  
  .animated {
    animation: slideIn 1s ease;
  }
</style>

<script>
  const element = document.querySelector('.animated');
  
  element.addEventListener('animationstart', () => {
    console.log('Animation started');
  });
  
  element.addEventListener('animationend', () => {
    console.log('Animation ended');
  });
  
  element.addEventListener('animationiteration', () => {
    console.log('Animation repeated');
  });
</script>

Performance Optimization

Animation Performance

Best performance: Animate transform and opacity (GPU-accelerated)
Avoid: Animating width, height, top, left (cause reflow)
Use will-change for complex animations (sparingly)
Keep animations under 60fps
Test on lower-end devices
Use transform: translate3d() to trigger GPU acceleration

.optimized-animation {
  /* Tell browser to optimize this property */
  will-change: transform;
  
  /* Use 3D transform for GPU acceleration */
  transform: translate3d(0, 0, 0);
}

Accessibility

Respect user motion preferences:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Common Patterns

Loading Dots

@keyframes dot-pulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

.dot {
  animation: dot-pulse 1.4s infinite;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

Skeleton Loading

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

Notification Badge

@keyframes badge-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

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

Best Practices

Animation Best Practices

Keep animations purposeful and subtle
Use appropriate durations (0.2-0.5s for UI, 1-3s for attention)
Provide pause controls for long animations
Test animations on different devices
Consider accessibility and motion sensitivity
Use animation-fill-mode: forwards to maintain end state
Combine with transitions for best results
Document complex animation sequences

Browser Support

CSS animations have excellent browser support. Use vendor prefixes for older browsers:

@-webkit-keyframes slideIn {
  /* Webkit browsers */
}

@keyframes slideIn {
  /* Standard */
}

.element {
  -webkit-animation: slideIn 1s ease;
  animation: slideIn 1s ease;
}

CSS animations are powerful tools for creating engaging, professional web experiences. Use them wisely to enhance user experience without overwhelming your visitors!

CSS Animations

On this page

CSS Animations

On this page