Search

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.

Wanna learn CSS Animations deeply?

4 responses to “Single CSS Keyframe Tricks are Magic”

  1. Avatar Faraz Ahmad says:

    Nice, animation. I tried on some tools!

  2. Avatar yaireo says:

    it’s not trick or magic but basic and expected behaviour.
    I would even say one of the first things CSS developers might learn when starting a chapter about CSS animations.

    For a real impressive magic trick with a single keyframe, read my answer here: https://stackoverflow.com/a/64322555/104380

  3. Avatar Zorava says:

    Animations are lovely, can we use them on premium websites?

  4. Avatar Faisal says:

    Magical animation, do you have more of them.

Leave a Reply

Your email address will not be published. Required fields are marked *

Frontend Masters ❤️ Open Source

Did you know? Frontend Masters Donates to open source projects. $313,806 contributed to date.