Whatever elements you choose, there are several rules: Aspects - A sequence of visually-distinguishable elements within the belt.This is what actually performs the animation. Items on top of it are stationary but the belt moves items through space. Think of this like a portion of a conveyor belt at the grocery store. Belt - A child container nested within the stage to house visually-distinguishable elements.For now, everything is visible for demonstration purposes. Anything that goes from the visible area of the stage to behind the curtains will be invisible to the audience. Think of this like a theatre stage, where the left and right sides are blocked by curtains. Stage - A parent container that designates where the visible area of the animation begins and ends.This animation technique uses several elements to achieve this effect.įirst, let's establish those elements and their vocabulary in a scene: This is not the only animation technique for gradients, but I've found it's one of the more elegant and versatile. In this article, I will demonstrate how to animate gradients in an infinite, linear fashion using nothing but HTML and CSS.
