Single CSS Keyframe Tricks are Magic

What happens with a CSS @keyframe animation like this when called?

@keyframes pulse {
  50% {
    scale: 1.5;
  }
}Code language: CSS (css)

There is only one “keyframe” there at 50%. So what happens at 0% through the animation? The scale property is… whatever it already was. And at 100%? Back to whatever it already was. Assuming the default scale of 1, it will grow the element then shrink back down again. So little code!

David East and Adam Argyle dig into this in the video Single CSS keyframe tricks are magic and have a great demo.