Writing a custom CSS transition using the css function
The first custom transition we will be attempting to write together is an effect often witnessed in presentations, commonly referred to as the “color swipe.” This effect stands out due to its dynamic sweep of color that flows across the screen, creating a sense of energy that captivates the viewer’s attention.
The color swipe transition, as its name suggests, involves a sweeping change in color that takes place over an object.
Picture this: you’re looking at a static screen, possibly a section of a website. Suddenly, a new color begins to surface from one edge of the screen. Like a wave, this color spreads across the screen, enveloping it. As soon as the color completely covers the screen, it starts to recede from the edge of origin, revealing new content. When the color entirely withdraws, the new content is fully unveiled:
igure 14.3: The color swipe transition
The swipe can move in from...
