Keyframe animation

Basic Concepts of Keyframe Animation

Keyframe animation is a core technology in CSS3 for creating complex animation effects. It allows developers to define key nodes (keyframes) in an animation sequence, with the browser automatically calculating the intermediate transition states. Compared to traditional transitions, keyframes provide more precise control, enabling multi-stage, non-linear animation effects.

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

Detailed Keyframe Syntax

The @keyframes rule consists of two parts: the animation name and the keyframe block. The keyframe block contains a set of style rules that define specific points in the animation sequence. These points can be expressed as percentages (0% to 100%) or using the from/to keywords (equivalent to 0% and 100%, respectively).

@keyframes complex-animation {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  30% {
    opacity: 1;
  }
  70% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

Animation Property Configuration

After defining keyframes, they must be applied to elements using the animation property. The animation property is a shorthand for the following sub-properties:

• animation-name: Specifies the @keyframes animation name
• animation-duration: Duration of the animation
• animation-timing-function: Speed curve of the animation
• animation-delay: Delay before the animation starts
• animation-iteration-count: Number of times the animation plays
• animation-direction: Direction of the animation playback
• animation-fill-mode: How styles are applied before and after the animation
• animation-play-state: Controls the playback state of the animation

.box {
  animation: bounce 2s ease-in-out infinite alternate;
}

@keyframes bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50px);
  }
}

Multi-Keyframe Animation Practice

Complex animations often require defining multiple keyframes. For example, creating a loading animation:

@keyframes loading {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 0 0 rgba(0,0,0,0.1);
  }
  50% {
    transform: rotate(180deg);
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
  }
  100% {
    transform: rotate(360deg);
    box-shadow: 0 0 0 rgba(0,0,0,0.1);
  }
}

.loader {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  animation: loading 1.5s linear infinite;
}

Animation Performance Optimization

The performance of keyframe animations depends on the animation properties and the browser's rendering mechanism:

1. Prioritize using transform and opacity properties, as they can be GPU-accelerated.
2. Avoid modifying properties like width/height in keyframes, as they trigger reflows.
3. Use the will-change property to inform the browser of potential changes in advance.
4. Control animation pauses with animation-play-state appropriately.

.optimized-box {
  will-change: transform, opacity;
  animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Advanced Techniques for Keyframe Animation

Step Animation

Use the steps() function to create frame-by-frame animation effects, suitable for sprite animations:

@keyframes walk {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -800px 0;
  }
}

.character {
  width: 100px;
  height: 100px;
  background-image: url('sprite.png');
  animation: walk 1s steps(8) infinite;
}

Animation Chaining

Achieve sequential animations for multiple elements using animation-delay:

.item {
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

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

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

3D Transformation Animation

Combine transform-style and perspective to create 3D effects:

.container {
  perspective: 1000px;
}

.card {
  transform-style: preserve-3d;
  animation: flip 2s infinite;
}

@keyframes flip {
  0% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

Responsive Keyframe Animation

Use CSS variables and media queries to create responsive animations:

:root {
  --anim-duration: 1s;
}

@media (max-width: 768px) {
  :root {
    --anim-duration: 0.5s;
  }
}

.responsive-box {
  animation: pulse var(--anim-duration) infinite;
}

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

Keyframe Animation and JavaScript Interaction

Dynamically control keyframe animations with JavaScript:

// Dynamically create keyframes
const styleSheet = document.styleSheets[0];
styleSheet.insertRule(`
  @keyframes dynamicSlide {
    from { transform: translateX(${startPos}px); }
    to { transform: translateX(${endPos}px); }
  }
`, styleSheet.cssRules.length);

// Control animation playback
const element = document.querySelector('.box');
element.style.animation = 'dynamicSlide 2s forwards';

// Listen to animation events
element.addEventListener('animationend', () => {
  console.log('Animation ended');
});

Browser Compatibility Considerations

Although modern browsers generally support keyframe animations, keep the following in mind:

1. Use the -webkit- prefix for older WebKit browsers.
2. Provide JavaScript fallback solutions.
3. Test performance across different devices.

@-webkit-keyframes fallback {
  /* Legacy syntax */
}
@keyframes modern {
  /* Standard syntax */
}