Aliases

Overview

Aliases are predefined shortcuts that bundle multiple CSS properties into a single, meaningful name. Instead of writing out multiple lines of CSS, you can use an alias to quickly apply a group of related properties.

For example, the pull-up() alias combines translateY(-1rem) and hover:translateY(0rem) into one reusable shorthand. Aliases are particularly helpful for common animations or styles you use repeatedly.

Check the list of aliases to learn about individual aliases.

Syntax

Basic syntax

Aliases use a straightforward syntax that combines the trigger and the alias name. Each alias has its own default behavior, which includes preset values and options. However, you can customize aliases by providing specific values and options as needed.

• trigger: The event that activates the alias (e.g., hover, click).
• alias: The predefined name representing a group of properties.
• Default Behavior: When no value or options are provided, the alias uses its default settings.

Customizable syntax

Almost every alias can be customized using the custom value and options.

• value: Overrides the alias’s default value with a custom one.
• options: Modifies settings like duration, easing, or delay to fine-tune the animation or style.

Example

Basic

Here is the pull-up() alias that combines two CSS properties: translateY(-1rem) as the initial state and hover:translateY(0rem) as the final state. This setup creates a smooth upward motion effect on hover, all without requiring additional customization.

Custom

Alias customization is done like other CSS properties in the TorusKit. Just provide a value and options if necessary.