Transitions and animations

Transitions and Animations

Transitions and animations are powerful CSS features that allow you to create dynamic and engaging user interfaces. They add visual interest and provide feedback to user interactions, making your websites feel more polished and responsive.

Transitions

Transitions allow you to smoothly change CSS property values over a specified duration. They're ideal for simple state changes like hover effects, focus states, or toggling visibility.

Key Properties:

• transition-property: Specifies the CSS property to transition. Can be all to transition all properties.
• transition-duration: Defines the length of time the transition takes to complete (e.g., 0.3s, 1s, 500ms).
• transition-timing-function: Controls the speed curve of the transition. Common values include:
  • ease (default): Starts slowly, speeds up, then slows down.
  • linear: Constant speed.
  • ease-in: Starts slowly.
  • ease-out: Ends slowly.
  • ease-in-out: Starts and ends slowly.
  • cubic-bezier(n, n, n, n): Allows for custom speed curves.
• transition-delay: Specifies a delay before the transition starts (e.g., 0.1s, 200ms).

Shorthand Property:

You can combine all these properties into a single transition shorthand:

transition: property duration timing-function delay;

Example:

<div class="box">Hover me!</div>

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition: width 0.3s ease-in-out, background-color 0.5s linear;
}

.box:hover {
  width: 200px;
  background-color: lightcoral;
}

This code will smoothly transition the width and background color of the div when hovered over. The width transition uses an ease-in-out timing function, while the background color uses a linear function.

Animations

Animations allow you to define a sequence of CSS property changes over a specified duration. They're more complex than transitions and are suitable for more elaborate effects.

Key Concepts:

• @keyframes: Defines the animation sequence. You specify different keyframes (points in time) and the property values at each keyframe.
• animation-name: Specifies the name of the @keyframes rule to use.
• animation-duration: Defines the length of time the animation takes to complete.
• animation-timing-function: Controls the speed curve of the animation (same values as transition-timing-function).
• animation-delay: Specifies a delay before the animation starts.
• animation-iteration-count: Determines how many times the animation should repeat. Can be a number (e.g., 2) or infinite.
• animation-direction: Controls whether the animation should play forward, backward, or alternate.
  • normal (default): Plays forward.
  • reverse: Plays backward.
  • alternate: Plays forward, then backward.
  • alternate-reverse: Plays backward, then forward.
• animation-fill-mode: Specifies how the element should be styled before and after the animation.
  • none (default): No styling is applied.
  • forwards: The element retains the styles from the last keyframe.
  • backwards: The element applies the styles from the first keyframe before the animation starts.
  • both: Combines forwards and backwards.

Shorthand Property:

You can combine all these properties into a single animation shorthand:

animation: name duration timing-function delay iteration-count direction fill-mode;

Example:

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

@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}

.animated-box {
  width: 100px;
  height: 100px;
  background-color: orange;
  animation-name: move;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

This code will create an animation that moves the div horizontally back and forth indefinitely.

Performance Considerations

• Use transform and opacity for animations: These properties are often hardware-accelerated by the browser, resulting in smoother performance.
• Avoid animating properties that trigger layout changes: Properties like width, height, top, and left can cause the browser to recalculate the layout, which is expensive.
• Use requestAnimationFrame for JavaScript-based animations: This ensures that animations are synchronized with the browser's repaint cycle.
• Keep animations short and simple: Complex animations can be resource-intensive.
• Test on different devices and browsers: Performance can vary.

By understanding transitions and animations, you can create visually appealing and engaging web experiences that enhance user interaction and improve the overall usability of your websites.