CSS Animation Fundamentals

One of the easiest ways to add life to your website is with CSS animations. These can range from subtle hover effects to complex motion sequences, all without needing JavaScript.

Transitions vs. Animations

CSS offers two main ways to create movement: transitions and animations.

Transitions provide a smooth change from one state to another, like when hovering over a button.

Animations allow more complex sequences with multiple keyframes and can run automatically without user interaction.

CSS Transitions

Transitions are the simplest way to add motion to your elements. They consist of four main properties:

.element {
  /* Initial state */
  background-color: blue;
  transform: scale(1);

  /* Transition properties */
  transition-property: background-color, transform;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  transition-delay: 0s;

  /* Shorthand version */
  /* transition: background-color 0.3s ease-out 0s, transform 0.3s ease-out 0s; */
}

.element:hover {
  /* End state */
  background-color: red;
  transform: scale(1.2);
}

When a user hovers over the element, it will smoothly change from blue to red and grow in size over 0.3 seconds.

Transition Properties

1. transition-property: Specifies which CSS properties should transition (use all to transition all changing properties)
2. transition-duration: How long the transition takes (in seconds or milliseconds)
3. transition-timing-function: The acceleration curve (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier)
4. transition-delay: How long to wait before starting the transition

Timing Functions

The timing function controls the pace of the transition:

.linear {
  transition-timing-function: linear;
} /* Constant speed */
.ease {
  transition-timing-function: ease;
} /* Default, slow start, faster middle, slow end */
.ease-in {
  transition-timing-function: ease-in;
} /* Slow start, fast end */
.ease-out {
  transition-timing-function: ease-out;
} /* Fast start, slow end */
.ease-in-out {
  transition-timing-function: ease-in-out;
} /* Slow start, fast middle, slow end */
.custom {
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
} /* Custom curve */

CSS Animations

For more complex movements, CSS animations use keyframes to define states at different points in time.

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

.bouncing-element {
  /* Animation properties */
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;

  /* Shorthand version */
  /* animation: bounce 1s ease-in-out 0s infinite normal forwards running; */
}

This creates a bouncing effect that repeats forever.

Animation Properties

1. animation-name: References the @keyframes rule
2. animation-duration: How long one cycle takes
3. animation-timing-function: Controls the pace (same options as transitions)
4. animation-delay: How long to wait before starting
5. animation-iteration-count: How many times to run (number or infinite)
6. animation-direction: normal, reverse, alternate, alternate-reverse
7. animation-fill-mode: What styles apply before/after (none, forwards, backwards, both)
8. animation-play-state: running or paused (useful for toggling animations)

Multiple Keyframes

You can define as many keyframes as needed:

@keyframes rainbow {
  0% {
    background-color: red;
  }
  14% {
    background-color: orange;
  }
  28% {
    background-color: yellow;
  }
  42% {
    background-color: green;
  }
  56% {
    background-color: blue;
  }
  70% {
    background-color: indigo;
  }
  84% {
    background-color: violet;
  }
  100% {
    background-color: red;
  }
}

Performance Tips

While animations are powerful, they can impact performance. Follow these best practices:

1. Stick to transform and opacity: These properties are the most performant to animate
2. Avoid animating layout properties: Properties like width, height, padding, margin, and position can cause layout recalculation
3. Use will-change: Tells the browser to prepare for an animation, but use sparingly
4. Prefer short animations: Long or complex animations can drain battery on mobile devices

.performant-animation {
  transform: translateZ(0); /* Triggers hardware acceleration */
  will-change: transform, opacity; /* Hint to browser (use sparingly) */
}

Common Animation Patterns

Here are some useful animation patterns to get you started:

Fade In

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 1s ease-out forwards;
}

Slide In

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

.slide-in {
  animation: slideInFromLeft 0.5s ease-out forwards;
}

Pulse

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

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

Spinner

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

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

B[Create @keyframes]

B --> C[Apply Animation to Elements]
C --> D[Test on Different Devices]
D --> E{Performance OK?}
E -->|No| F[Optimize]
F --> C
E -->|Yes| G[Finalize]

—>

Using CSS Variables for Dynamic Animations

CSS variables (custom properties) can make your animations more flexible:

:root {
  --animation-speed: 1s;
  --animation-distance: 50px;
  --primary-color: #3498db;
}

@keyframes slideIn {
  from {
    transform: translateY(var(--animation-distance));
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animated-item {
  animation: slideIn var(--animation-speed) ease-out forwards;
  color: var(--primary-color);
}

/* Later you can modify variables with JavaScript */
/* document.documentElement.style.setProperty('--animation-speed', '2s'); */

Sequencing Multiple Animations

You can create sequences by using different delay values:

.item:nth-child(1) {
  animation-delay: 0.1s;
}
.item:nth-child(2) {
  animation-delay: 0.2s;
}
.item:nth-child(3) {
  animation-delay: 0.3s;
}
.item:nth-child(4) {
  animation-delay: 0.4s;
}

Conclusion

CSS animations are a powerful way to enhance your website’s user experience without relying on JavaScript. Start with simple transitions and gradually experiment with more complex keyframe animations as you become comfortable.

Remember that the best animations are those that enhance usability rather than distract from it. Subtle animations often work better than flashy ones, especially for professional websites.

By mastering these foundational concepts, you’ll be able to create engaging, performance-optimized animations that bring your web projects to life.