Chapter 12: CSS Transitions and Animations

CSS transitions and animations allow you to create dynamic and engaging visual effects on your web pages. They enable smooth changes and movements of elements, enhancing the user experience and making interactions more intuitive.

1. CSS Transitions

CSS transitions provide a way to make changes to properties occur gradually over a specified duration. They are ideal for simple animations such as hover effects or focusing transitions.

Transition Properties

transition-property: Specifies the CSS property to which the transition is applied. You can list multiple properties separated by commas.
transition-duration: Defines how long the transition should take. It is set in seconds (s) or milliseconds (ms).
transition-timing-function: Describes the speed curve of the transition. Common values include:
- linear: Constant speed.
- ease: Starts slow, speeds up, then slows down.
- ease-in: Starts slow, then speeds up.
- ease-out: Starts fast, then slows down.
- ease-in-out: Starts slow, speeds up, and then slows down again.
transition-delay: Specifies the delay before the transition starts, set in seconds (s) or milliseconds (ms).

/* Apply a transition to the background color */
.box {
  background-color: #007bff;
  transition: background-color 0.5s ease-in-out;
}

.box:hover {
  background-color: #28a745;
}

2. CSS Animations

CSS animations provide more control and flexibility compared to transitions. They allow you to define keyframes to create complex sequences of animations.

@keyframes Rule

The @keyframes rule defines the keyframes for an animation. Keyframes describe the style changes at various points during the animation.

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

Animation Properties

animation-name: Specifies the name of the @keyframes animation.
animation-duration: Defines how long the animation should take, set in seconds (s) or milliseconds (ms).
animation-timing-function: Describes the speed curve of the animation. Uses the same values as transition-timing-function.
animation-delay: Specifies the delay before the animation starts, set in seconds (s) or milliseconds (ms).
animation-iteration-count: Defines how many times the animation should repeat. It can be a specific number or infinite for endless looping.
animation-direction: Determines the direction of the animation. Values include:
- normal: The animation plays forward (default value).
- reverse: The animation plays backward.
- alternate: The animation alternates between forward and backward on each cycle.
- alternate-reverse: The animation alternates between backward and forward on each cycle.
animation-fill-mode: Specifies how the animation should apply styles before and after its execution. Values include:
- none: No styles are applied outside the animation (default value).
- forwards: The styles defined in the last keyframe are applied after the animation ends.
- backwards: The styles defined in the first keyframe are applied before the animation starts.
- both: Combines forwards and backwards.
animation-play-state: Specifies whether the animation is running or paused.

.box {
  animation-name: slideIn;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

3. Combining Transitions and Animations

You can use transitions and animations together to create sophisticated effects. For example, you might use a transition to smoothly change the color of an element and an animation to move it across the screen.

.box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  transition: background-color 0.5s ease-in-out;
  animation: slideIn 2s ease-in-out;
}

.box:hover {
  background-color: #28a745;
}

4. Practical Examples

Simple Hover Effect

<div class="hover-box"></div>

.hover-box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  transition: background-color 0.3s ease;
}

.hover-box:hover {
  background-color: #28a745;
}

Keyframe Animation

<div class="animated-box"></div>

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

.animated-box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  animation: bounce 2s infinite;
}

Animation with Delay and Multiple Iterations

<div class="delayed-box"></div>

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.delayed-box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  animation: fadeInOut 3s ease-in-out 1s 3;
}

Conclusion

CSS transitions and animations are powerful tools for creating dynamic and engaging web interfaces. Transitions are useful for simple property changes, while animations offer more control and complexity. By mastering these techniques, you can enhance user interactions and make your web designs more lively and appealing.