Home/CSS/Animations and Transitions

Animations and Transitions

CSS Advanced•Reading time: 7 min

CSS animations and transitions bring web pages to life by adding movement, enhancing user interactions, and improving the overall user experience.

In this tutorial, you'll learn how to create smooth transitions between states and build complex animations using pure CSS.

1CSS Transitions

Transitions provide a smooth change from one property value to another over a specified duration. They're perfect for hover effects, form interactions, and simple state changes.

css

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  /* Transition syntax: property duration timing-function delay */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.button:hover {
  background-color: #2980b9;
  transform: translateY(-3px);
}

/* Individual transition properties */
.card {
  transition-property: transform, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  transition-delay: 0s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

Transition Properties:

transition-property: Which properties to animate (e.g., color, opacity, transform)
transition-duration: How long the transition takes (e.g., 0.3s, 300ms)
transition-timing-function: The acceleration curve (e.g., ease, linear, cubic-bezier)
transition-delay: Delay before the transition starts (e.g., 0.1s)
transition: Shorthand for all the above properties

Common Timing Functions:

ease-linear

Consistent speed

ease-in

Starts slow, ends fast

ease-out

Starts fast, ends slow

ease-in-out

Starts and ends slow

cubic-bezier

Custom curve with overshoot

steps(5, end)

Step-by-step transition

Hover over each element to see the transition effect

2CSS Animations with @keyframes

CSS animations allow you to create more complex and controlled animations using keyframes. Unlike transitions, animations can run automatically, repeat, and have multiple steps.

css

/* Define the keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Define the keyframes with multiple steps */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Apply animation to an element */
.element {
  /* animation: name duration timing-function delay iteration-count direction fill-mode play-state */
  animation: fadeIn 1s ease-out forwards;
}

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

/* Individual animation properties */
.notification {
  animation-name: shake;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

Animation Properties:

animation-name: References the @keyframes name
animation-duration: How long the animation takes to complete one cycle
animation-timing-function: The acceleration curve
animation-delay: Delay before the animation starts
animation-iteration-count: How many times to run (number or infinite)
animation-direction: Whether to alternate direction (normal, reverse, alternate, alternate-reverse)
animation-fill-mode: How styles are applied before/after the animation (none, forwards, backwards, both)
animation-play-state: Whether the animation is running or paused
animation: Shorthand for all the above properties

Common Animation Examples:

Pulse

Creates a pulsing effect

Bounce

Creates a bouncing effect

Spin

Creates a spinning effect

Fade In/Out

Alternates between fading in and out

Shake

Creates a shaking effect

Slide In

Slides in from the side

These animations run automatically without user interaction

3Animatable Properties

Not all CSS properties can be animated. Here's a list of commonly animated properties and how to optimize them for performance.

Performant Properties

css

/* These properties are optimized for animation */

/* Transform animations */
.scale {
  transform: scale(1);
  transition: transform 0.3s ease;
}
.scale:hover {
  transform: scale(1.1);
}

/* Opacity animations */
.fade {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.fade:hover {
  opacity: 1;
}

/* Combined transforms */
.move-and-scale {
  transform: translateX(0) scale(1);
  transition: transform 0.3s ease;
}
.move-and-scale:hover {
  transform: translateX(10px) scale(1.05);
}

These properties use the GPU for rendering and don't cause reflows.

Less Performant Properties

css

/* These properties may cause performance 
   issues when animated */

/* Layout animations */
.width-change {
  width: 200px;
  transition: width 0.3s ease;
}
.width-change:hover {
  width: 300px;
}

/* Position animations */
.position-change {
  top: 0;
  transition: top 0.3s ease;
  position: relative;
}
.position-change:hover {
  top: -10px;
}

/* Better alternatives */
.use-transform-instead {
  transform: scaleX(1); /* instead of width */
  transform: translateY(0); /* instead of top */
  transition: transform 0.3s ease;
}
.use-transform-instead:hover {
  transform: scaleX(1.5);
  /* or */
  transform: translateY(-10px);
}

These properties trigger browser reflows and should be avoided in animations when possible.

Commonly Animated Properties:

Transform Properties:

transform: translateX/Y/Z()
transform: scale()
transform: rotate()
transform: skew()

Color Properties:

color
background-color
border-color
outline-color

Other Properties:

opacity
box-shadow
text-shadow
filter

4Best Practices

Follow these guidelines to create smooth, accessible, and performant animations.

Performance Tips

Prioritize animating transform and opacity
Avoid animating properties that trigger layout recalculation
Use will-change property for complex animations
Keep animations short and purposeful
Limit the number of animated elements on screen
Test performance on lower-end devices

Accessibility Considerations

Respect user preferences with prefers-reduced-motion
Avoid animations that flash or pulse rapidly
Don't rely solely on animation to convey information
Keep motion subtle and meaningful
Provide ways to pause or stop animations

Respecting User Preferences

css

/* Base animation for all users */
.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
}

/* Respect prefers-reduced-motion setting */
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  
  .card:hover {
    transform: none;
  }
  
  /* Disable all animations site-wide */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

5Try It Yourself

Now that you've learned the basics of CSS animations and transitions, it's time to put your skills to the test. Try creating your own animations and experiment with different properties and timing functions.

Challenge:

Create a button that changes color and size on hover. Add a subtle shadow and a smooth transition effect.