Animated pride flags | Josh W. Comeau

If you ever wanted to make a cool, animated flag from scratch on the web, Josh has you covered. But the article is also full of clever tricks for animation in general.

On using CSS variables to stagger the amount of movement across otherwise identical elements, to create momentum and physics:

What if we wanted this number to be dynamic? For example, wouldn't it be cool if each column had a slightly different billow amount? Like a real flag attached to a flagpole?

It turns out, we can do this with CSS Variables!

@keyframes oscillate {
  from {
    transform: translateY(var(--billow));
  }
  to {
    transform: translateY(calc(var(--billow) * -1));
  }
}

On setting up animations to start midway through their run cycle by using negative delays:

It turns out, we can use a negative value for animation-delay!

For example, if we set animation-delay: -200ms, the animation will run immediately, but it will act as though it has already been running for 200ms.