Introduction to CSS properties animation

Overview

TorusKit simplifies the process of creating CSS animations by consolidating both the CSS and JavaScript logic into a single data-tor HTML attribute. Instead of managing complex CSS keyframes or writing additional JavaScript for animation control, all parameters are defined directly within the HTML attribute.

By using this approach, you can animate properties like opacity, transform, and others more efficiently. For instance, to animate the opacity of an element, you simply set data-tor="opacity(0.25 <duration: 1s>)" in the HTML. This tells the browser to animate the opacity to 0.25 over a 1-second duration, with no need for additional external code. The syntax allows for flexible animation control by specifying values such as duration, delay, easing, and other properties in an intuitive format.

This provides a cleaner, more maintainable way to add animations to your website. It enhances productivity, especially for projects requiring frequent animation adjustments, as all changes can be managed within the HTML and CSS layers.

Syntax

The syntax is easy to learn since property names use dashed-case, just like standard CSS. The property value to be animated is defined inside () parentheses. To customize the animation, options can be passed inside <> angle brackets. In this syntax definition, the animation is triggered by the data-tor attribute, which follows a structured format:

• trigger: specifies the event or action that initiates the animation (e.g., hovering a button).
• css-property(value) defines the CSS property to be animated, with the value to be applied written inside the () parentheses.
• <options> inside <> angle brackets allow for further customization of the animation, such as duration, delay, or easing.

Responsiveness

You can create a responsive animations by specifying different values for various screen sizes using the [] brackets. The :: separator is used to define breakpoints, allowing you to tailor animations to specific responsive resolutions. For example, in the scale([1.25 md::1.5 xl::2]) code from below example:

• 1.25 is the default scaling value for small screens or no specific breakpoint.
• md::1.5 sets the scale to 1.5 for medium screens and up (md).
• xl::2 sets the scale to 2 for extra-large screens and up (xl).

Numeric values

Values that includes a number such as 0.5, 2rem, 45deg and so (with unit, or unit-less) can be smoothly transitioned from the initial state to the final one. All standard CSS numeric values are supported. TorusKit uses the built-in CSS calc function, which allows you to combine different units together (if supported.)

Note: Not all numeric values can utilize the the calc CSS function. For instance, the grid-column-templates can use the 1fr (fractional) numeric values, but cannot be combined with the CSS calc function. In this case use the ^, a TorusKit no-process operator.

Unit-less property

In this example, we animate the scale property which uses a unit-less values. On hover, the scale transitions from the value of 1 (default), to the final value 0.25, over a duration of 1 second.

Property with a unit

In this example, we animate the translateX property on hover which uses the 2rem value with a rem unit.

Textual values

Text-based values cannot be smoothly animated; they only switch between two distinct states—the initial and the final—with no gradual transition.

CSS value functions

Various CSS functions can be applied to properties that support them. The following examples demonstrate how to use different CSS functions within property definitions. Some functions require an initial value to be specified, as they do not have default values.

Multi-layer values

Some properties, such as background, can be defined with multiple layers. In TorusKit, the pipe (|) operator is used to separate these layers. In this example, the background property combines a background-image and a background-color.

• url(/assets/images/docs/pattern-diamond.svg) is the background-image.
• #ff0fad is the background-color