Animation

Moving page elements can be designed using cascading style sheets (CSS), with the a named @keyframes rule and accompanying animation styles. The @keyframes rule specifies the position of an animated object as percent of completion. The rule is then attached to an object by its name and the desired duration of the animation.

Limited user control can be provided using the "hover" and "active" pseudoclasses, which affect the style when the mouse is over the object or is clicked on the object.

Animations can be very eye-catching but can also be distracting if repeated multiple times. On this page, the three balloons were animated with CSS, while the balloon in the banner was animated with the program Tumult Hype.

Banner image by Daniela Cuevas and text image by Andre Frueh, both on Unsplash. Balloon icon by Mohsen on PNGTree.