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.
Nice, animation. I tried on some tools!
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
Animations are lovely, can we use them on premium websites?
Magical animation, do you have more of them.