Recently, Twitter has updated their fav button to an animated fav button. The key to producing this effect is by using CSS animation steps timing function. How it works? The general concept of this implementation is similar to zeotrope devices which display a sequence of illustrations showing progressive phases of that motion. In this demo by Donovan Hutchinson, the key frames are placed equally spaced in one line in a single image file, and we control it using transition from the first to the last frame by positioning the background. Hit the button below to learn more.

View More