AnimXYZ Documentation

Transform utilities and variables allow you to define the starting (.xyz-in) or ending (.xyz-out) CSS transform of an animating element. For example, using xyz="up" applies a translateY() to an element, moving it from above its normal position when animating in and to that same position when animating out.

You can override any provided transform variables with custom values in your CSS or via inline styling for granular control. This is particularly useful if an element already has a transform applied (e.g., transform: translateX(-50%)) that you want to maintain during an AnimXYZ animation; in such cases, pass the existing value to the relevant CSS variable (e.g., --xyz-translate-x: -50%).

AnimXYZ allows you to mix and match multiple animation utilities within a single xyz attribute to create complex animations without writing additional CSS. You can combine different types of transformations (e.g., movement, rotation, scaling) and timing controls.

Example combinations:

• xyz="fade up" (Fade and move up)
• xyz="fade flip-up flip-left" (Fade with flip effects)
• xyz="fade down-5 rotate-right-50% stagger" (Fade, move down, rotate, and stagger children)
• xyz="fade up-100% flip-down flip-right-50% rotate-left-100% origin-bottom duration-10 stagger" (Complex multi-property animation)

Direction utilities and variables control the CSS animation-direction property.

By default, AnimXYZ sets the direction to normal for in, appear, and enter variants, and reverse for the out variant. You can override these defaults using direction utilities, which is particularly useful for infinite animations (e.g., making an element grow and shrink indefinitely).

To use a specific direction, add the utility to your xyz attribute, such as xyz="big iterate-infinite direction-alternate".

The iterate utilities and variables control the CSS animation-iteration-count property. This allows you to specify how many times an animation should repeat, either a fixed number of times or indefinitely.

Available Variables

You can use the following CSS variables to control iteration counts for different animation phases:

Default Value

• --xyz-iterate-default: 1

Usage Example

You can apply these via the xyz attribute or by setting the CSS variables directly in your styles.

If the standard origin utilities do not provide the precision you need, you can override the origin using the --xyz-origin CSS variable. This allows for granular control using specific pixel or percentage values.

Example: --xyz-origin: 50px 50px sets the origin to a point 50px down and 50px to the right from the top-left corner.

AnimXYZ CSS variables are inherited by child elements. An element with an active class will use its parent's CSS variables for its animations unless:

1. The child specifically overrides the variable.
2. The child uses an xyz attribute, which overrides all AnimXYZ variables for that specific element.

Variables are categorized by their application scope:

• Overall: Applies to all states.
• In: Applies to the 'in' animation state.
• Out: Applies to the 'out' animation state.
• Appear: Applies to the 'appear' animation state.

You can target specific phases of an element's lifecycle by prepending the direction variant name to a utility. The available variants are:

• In: For entering animations.
• Out: For exiting animations.
• Appear: For the initial appearance of the element.

Example: xyz="fade up out-down appear-big duration-5 in-duration-10" applies a fade and up movement generally, but uses down when exiting, big when appearing, a 5 duration for appearing, and a 10 duration for entering.

To achieve a 3D effect in CSS animations, elements often require a perspective property. While you can apply this to a parent element manually (e.g., perspective: 500px), AnimXYZ provides utility classes to apply perspective specifically to an element only while it is animating.

Note: Smaller perspective values result in a more pronounced 3D effect.