CSS Animation Detailed Explanation

CSS Animation Detailed Explanation

1. Description
CSS animation allows elements to achieve smooth transitions between different states without using JavaScript. Define the animation sequence via the @keyframes rule, then apply the animation to the element via the animation property. Compared to transitions, animations can play automatically, loop multiple times, and contain more complex intermediate states.

2. Key Concept Analysis

2.1 @keyframes Rule
This is the core of the animation, used to define the style states of the animation at different points in time.

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Or use percentages to define more granular keyframes */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

2.2 Composition of the animation Property
This is the shorthand form for eight sub-properties:

  • animation-name: Specifies the name of the @keyframes to use.
  • animation-duration: Time required for the animation to complete one cycle.
  • animation-timing-function: The animation speed curve (e.g., ease, linear).
  • animation-delay: Delay time before the animation starts.
  • animation-iteration-count: Number of times the animation plays (infinite means infinite loop).
  • animation-direction: The direction of the animation playback (normal, reverse, alternate, etc.).
  • animation-fill-mode: How styles are applied before and after the animation (forwards, backwards, etc.).
  • animation-play-state: Controls whether the animation is running or paused (running, paused).

3. Detailed Implementation Steps

Step 1: Define Animation Keyframes
First, create the "script" for the animation, determining the styles at the starting point, intermediate points, and ending point:

@keyframes fade-scale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

Step 2: Apply Animation to Element
Bind the defined animation to the target element:

.box {
  animation: fade-scale 2s ease-in-out 0.5s 3 alternate;
}
/* Equivalent to:
animation-name: fade-scale;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: 3;
animation-direction: alternate;
*/

Step 3: Understand Animation Direction (direction)

  • normal: Plays from start each time (default).
  • reverse: Plays in reverse from the end each time.
  • alternate: Plays forward on odd iterations, reverse on even iterations.
  • alternate-reverse: Plays reverse on odd iterations, forward on even iterations.

Step 4: Control Animation Fill Mode (fill-mode)
Determines how keyframe styles are applied to the element before and after the animation:

  • none: No styles are applied before or after the animation (default).
  • forwards: The element retains the style of the last frame after the animation ends.
  • backwards: The style of the first frame is applied during the animation delay period.
  • both: Applies both the effects of forwards and backwards.

4. Practical Application Examples

Example 1: Loading Animation

@keyframes loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

Example 2: Complex Interaction Animation

@keyframes slide-bounce {
  0% {
    transform: translateX(-100px) scale(0.8);
    opacity: 0;
  }
  70% {
    transform: translateX(20px) scale(1.1);
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.card {
  animation: slide-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  animation-fill-mode: both;
}

5. Performance Optimization Suggestions

  1. Prioritize using transform and opacity properties, as they do not trigger reflow.
  2. Avoid modifying properties like width, height, margin, etc., in animations that trigger layout changes.
  3. Use the will-change property to inform the browser in advance that the element will change.
  4. For complex animations, consider using JavaScript solutions with requestAnimationFrame.

6. Browser Compatibility
Modern browsers generally support CSS animations. It's recommended to add prefixes for older browsers:

@-webkit-keyframes example { /* Safari/Chrome */ }
@-moz-keyframes example { /* Firefox */ }
@-o-keyframes example { /* Opera */ }

By mastering this knowledge, you can create a variety of rich interactive animations to enhance user experience.