You know those wipe transitions between scenes in Star Wars movies? Have you ever thought it would be awesome to recreate them with CSS? Probably not, but, well, here we are. Let’s do it. Spoiler alert: this article is secretly a tutorial on animating CSS masks. A Simple Gradient Mask CSS masking allows you to control which pixels of an element are visible and which are transparent — masked, if you will. A mask comes in the form of an image or gradient. When a mask is applied to an elemen...
