Write Elegant Animations in CSS with Dynamic and Composable Keyframes

Write Elegant Animations in CSS with Dynamic and Composable Keyframes

I struggled with bloated CSS animations for years, repeating keyframe blocks until my code felt like a tangled mess.

Here’s the usual way we write keyframe animations:

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

What happens if you skip the keyframe block entirely and lean on inherited CSS properties?

@keyframes fadeToTransparent {
  to {
    opacity: 0;
  }
}

It works just as smoothly, with half the code. Less clutter, more control. I thought it was just a neat shortcut. Then I realized it lets you dynamically tweak animations using CSS custom properties, and my mind was blown.

Let’s dive into how this works, plus a bonus tip to make your animations pop.

Core Concept Explained

When you skip the from block in your keyframe animation, the starting values pull directly from the element’s existing context.

Let’s make it clear with a quick demo. Take a look:

@keyframes fadeToTransparent {
  to {
    opacity: 0;
  }
}

.to-transparent {
  animation: fadeToTransparent 1000ms forwards;
}

<div class="row">
  <div class="ball to-transparent"></div>
  <div class="ball to-transparent" style="opacity: 0.6"></div>
  <div class="ball to-transparent" style="opacity: 0.3"></div>
</div>

Traditional keyframes lock you into fixed values. This tweak lets you override start states dynamically. When you drop the from part of a keyframe, the animation grabs the element’s current opacity and fades from that point. Mind blown. 🤯

It’s like the browser just knows where to begin. So slick. 😄

Reverse the Trick

This technique also works in reverse. By leaving out the to value, the animation transitions from a defined starting point to the element’s current value.

<style>
  @keyframes fadeFromTransparent {
    from {
      opacity: 0;
    }
  }

  .ball {
    animation: fadeFromTransparent 1000ms;
  }
</style>

<div class="ball" style="opacity: 0.5;">

In above example, when an element‘s opacity, it defaults to 1, behaving like a standard fade-in animation.

Why use this? It’s perfect for elements with non-opaque defaults or state-driven opacity such as a modals. Check out this practical example:

<style>
  @keyframes fadeFromTransparent {
    from {
      opacity: 0;
    }
  }

  .icon-btn {
    opacity: 0.7;
    animation: fadeFromTransparent 1000ms;

    &:hover, &:active, &:focus-visible {
      opacity: 1;
    }
  }
</style>

<button class="icon-btn">...</button>

In above example the button changes it’s opacity from 0 to 0.7. When the user hovers over the button, opacity changes to 1.

Advanced Combo Technique

This advanced trick will blow your mind. It allows you to dynamically animate using a value from another keyframe.

<style>
  @keyframes twinkle {
    from {
      opacity: 0.25;
    }
    to {
      opacity: 0.75;
    }
  }

  @keyframes fadeFromTransparent {
    from {
      opacity: 0;
    }
  }

  .ball {
    animation:
      twinkle 250ms alternate infinite,
      fadeFromTransparent 2000ms;
  }
</style>

<div class="ball"></div>

Here’s how this works:

The twinkle keyframe animation makes the ball’s opacity change between 0.25 and 0.75. The animation here runs in cycle. The first cycle takes opacity from 0.25 to 0.75. Next cycle takes opacity from 0.75 to 0.25.

The animation starts at an opacity of 0 but leaves the target opacity undefined.
When combined together, first animation takes opacity from 0 to twinkle with both animation having different time duration.

This example proves that multiple animations can change the same property without one cancelling the other.

The Final Master Trick

This animation trick will blow your mind completely. When I discovered it, I was surprised to see it is even possible in CSS animation.

In above animation, we have four balls and all of them has different motion of animation.

To make our CSS animation dynamic, we can use CSS variable defined in the ball element itself. We can access the CSS variable in our keyframe animation itself to make it dynamic.

<style>
  @keyframes oscillate {
    from {
      transform: translateX(calc(var(--amount) * -1));
    }
    to {
      transform: translateX(var(--amount));
    }
  }

  .ball {
    animation: oscillate 700ms ease-in-out alternate infinite;
  }
</style>

<!-- Edit these values to change the oscillation amount: -->
<div class="ball" style="--amount: 8px"></div>
<div class="ball" style="--amount: 16px"></div>
<div class="ball" style="--amount: 32px"></div>
<div class="ball" style="--amount: 64px"></div>

Final Takeaway

These cool tricks allows you to write animation in CSS like a pro. Try it out in your next project and share your thoughts below.

Follow me for more cool CSS nuggets.

Thank you for being a part of the community