The definition of animation keyframes

In CSS animations, keyframes (@keyframes) are the core rules that define the animation sequence. They allow developers to precisely control the style states of an animation at different points in time, enabling complex dynamic effects.

Basic Syntax of Keyframes

The @keyframes rule consists of an animation name and a set of keyframe selectors (percentages or from/to). The basic syntax structure is as follows:

@keyframes animation-name {
  0% {
    /* Initial state styles */
  }
  50% {
    /* Intermediate state styles */
  }
  100% {
    /* End state styles */
  }
}

Where:

• animation-name is a custom identifier for the animation.
• Percentage values represent key points in the animation's progress (0% for the start, 100% for the end).
• from (equivalent to 0%) and to (equivalent to 100%) can be used for simplified notation.

Usage of Keyframe Selectors

Keyframe selectors support multiple definition methods:

1. Two-State Animation (Start and End)

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

2. Multi-Stage Animation

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

3. Non-Uniform Time Distribution

@keyframes progress {
  0% {
    width: 0;
  }
  30% {
    width: 50%;
  }
  70% {
    width: 80%;
  }
  100% {
    width: 100%;
  }
}

Style Rules in Keyframes

Within keyframe blocks, any valid CSS property can be defined, but note the following:

1. Animatable Properties: Only properties that support transitions will produce animation effects.
2. Inheritance Rules: Unspecified properties will use the element's existing styles or values from the previous keyframe.
3. Important Declarations: !important is ignored in keyframes.

@keyframes colorChange {
  0% {
    background-color: red;
    transform: scale(1);
  }
  50% {
    background-color: yellow;
    /* The transform property is unspecified and will remain scale(1) */
  }
  100% {
    background-color: green;
    transform: scale(1.5);
  }
}

Combining Keyframes

Multiple animations can be applied to an element simultaneously by separating them with commas:

.element {
  animation: fadeIn 2s, bounce 1.5s infinite;
}

Advanced Features of Keyframes

1. Handling Repeated Definitions

If the same keyframe percentage is defined multiple times, the last occurrence will override the previous ones:

@keyframes example {
  50% {
    color: red;
  }
  50% {
    color: blue; /* This will take effect */
  }
}

2. Negative Percentages and Values Exceeding 100%

These values are treated as 0% or 100%:

@keyframes example {
  -20% {
    /* Equivalent to 0% */
  }
  120% {
    /* Equivalent to 100% */
  }
}

3. Dynamic Style Calculations

CSS variables can be used in keyframes:

:root {
  --end-scale: 1.5;
}

@keyframes zoom {
  to {
    transform: scale(var(--end-scale));
  }
}

Practical Examples of Keyframes

1. Loading Animation

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

.spinner {
  animation: loading 1s linear infinite;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  width: 40px;
  height: 40px;
}

2. Typewriter Effect

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3.5s steps(40, end);
  border-right: 3px solid;
  animation: blink-caret 0.75s step-end infinite;
}

3. Complex Path Animation

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(100px, 50px);
  }
  50% {
    transform: translate(200px, 0);
  }
  75% {
    transform: translate(100px, -50px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.ball {
  animation: move 4s ease-in-out infinite;
  width: 20px;
  height: 20px;
  background-color: tomato;
  border-radius: 50%;
}

Performance Optimization for Keyframes

1. Prefer transform and opacity: These properties can be handled by the compositor thread and do not trigger reflows.
2. Avoid modifying box model properties in keyframes: Such as width, height, padding, etc.
3. Reduce the number of keyframes: Excessive keyframes increase computational overhead.
4. Use will-change: Inform the browser in advance about elements that will change.

.optimized {
  will-change: transform, opacity;
  animation: smoothMove 2s ease;
}

@keyframes smoothMove {
  to {
    transform: translateX(100px);
    opacity: 0.5;
  }
}

Browser Compatibility for Keyframes

Modern browsers support @keyframes well, but note the following:

1. Older browsers requiring prefixes:

@-webkit-keyframes {}
@-moz-keyframes {}
@-o-keyframes {}

2. Modern feature detection:

@supports (animation-name: test) {
  /* Styles for browsers supporting keyframe animations */
}

Interaction Between Keyframes and JavaScript

Keyframes can be dynamically created and modified via JavaScript:

// Create a stylesheet
const styleSheet = document.createElement("style");
document.head.appendChild(styleSheet);

// Add keyframe rules
styleSheet.sheet.insertRule(`
  @keyframes dynamicAnimation {
    0% { transform: translateX(0); }
    100% { transform: translateX(${window.innerWidth - 100}px); }
  }
`, 0);

// Apply the animation
element.style.animation = "dynamicAnimation 2s";