Animation CSS properties

Fancy Animations' entrance and hover effects reach their result with a handful of different CSS properties. Knowing which one each animation uses explains both why some combinations clash (see Combining animations) and whether an animation is safe to use on a given element — transform and clip-path can conflict with a layout the element already depends on (a transform you've set elsewhere, a clip-path mask, a 3D preserve-3d ancestor), and the pseudo-element–based ones need an element that can host ::before/::after (not a bare <img> — see Image restrictions).

Animations that use transform

Animation	What it does
Zoom	Scales the element in or out
Slide	Slides the element in from a direction
Rotate	Rotates the element around a point
Bounce	Drops the element in with a springy overshoot

Animations that use position: relative

Animation	What it does
Slide relative	Like Slide, but the distance is a percentage of the viewport, not of the element — built to pair with another transform animation without the two fighting over the same property

Animations that use clip-path

Animation	What it does
Circle	Reveals the element through a growing circular mask
Sweep	Reveals the element with a sweeping wipe
Fan	Reveals the element with a fan-shaped wipe

Animations that use box-shadow

Animation	What it does
Ring	A ring that expands and fades outward from the element

Animations that use ::before / ::after

Animation	What it does
Border	A line that travels around the element's own edge, in a continuous loop

These are the only entrance/hover classes with this restriction — everything else in the tables above is safe on any element, including images.