CSS Transitions & Animations

Published 2 months ago

CSS provides powerful tools for adding motion and visual effects to web pages. Two key techniques for achieving this are CSS Transitions and CSS Animations. In this guide, we will explore their differences, how to use them, and when to choose one over the other.

1. CSS Transitions

CSS transitions allow elements to change their properties over a specified duration, creating smooth visual effects without requiring JavaScript. Transitions occur when a property value changes, such as when hovering over an element.

Transition Properties

There are four key transition properties:

transition-property: Specifies which CSS property to animate (e.g., color, width, opacity).
transition-duration: Defines how long the transition should take (e.g., 0.5s, 2s).
transition-timing-function: Controls the speed curve of the animation (e.g., ease, linear, ease-in-out).
transition-delay (optional): Sets a delay before the transition starts.

Basic Example of CSS Transitions

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.5s ease, transform 0.3s;
}

.button:hover {
  background-color: red;
  transform: scale(1.1);
}

Common Timing Functions

ease (default) – Starts slow, speeds up, and slows down at the end.
linear – Maintains a constant speed.
ease-in – Starts slow, then speeds up.
ease-out – Starts fast, then slows down.
ease-in-out – Starts and ends slow, speeds up in the middle.

2. Keyframe Animations

For more complex animations, CSS animations using @keyframes allow you to define multiple stages of an animation.

How Keyframes Work

A @keyframes rule defines a sequence of animation steps at different percentages of the animation duration (from 0% to 100%).

Basic Example of Keyframe Animations

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

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
  animation: bounce 1s infinite;
}

Animation Properties

animation-name: The name of the @keyframes animation.
animation-duration: How long the animation runs.
animation-timing-function: The speed curve (like transitions).
animation-delay: Delay before the animation starts.
animation-iteration-count: How many times the animation runs (infinite for endless looping).
animation-direction: normal, reverse, alternate, alternate-reverse.
animation-fill-mode: Controls how styles apply before/after the animation (none, forwards, backwards, both).

Example of Multiple Keyframes

@keyframes colorChange {
  0% { background-color: blue; }
  50% { background-color: green; }
  100% { background-color: red; }
}

.box {
  width: 100px;
  height: 100px;
  animation: colorChange 3s linear infinite;
}

3. CSS Animations vs JavaScript Animations

Both CSS and JavaScript can create animations, but they have different use cases.

When to Use CSS Animations

✔ Simple effects like hover states, loading indicators, and keyframe-based animations. ✔ When performance is important (CSS animations are optimized by browsers). ✔ When you don’t need to interact with the animation in real-time.

When to Use JavaScript Animations

✔ When animations require user interaction beyond hover and click. ✔ When animations need to change dynamically based on user input. ✔ When complex physics-based animations (e.g., bouncing, inertia) are needed.

Example using JavaScript (GSAP for advanced animations):

gsap.to(".box", { duration: 2, x: 200, y: 100, rotation: 360 });

Conclusion

CSS Transitions and Animations are essential for creating smooth, engaging web experiences. Use transitions for simple hover effects and keyframe animations for more complex movements. When more control and interaction are needed, JavaScript can complement CSS animations.

By mastering these techniques, you can enhance the interactivity and appeal of your web pages effortlessly!

Happy coding! 🚀

Obafemi Emmanuel