CSS properties for animation

Overview

TorusKit supports animating almost any CSS property with number-based value. The value may contain unit (e.g. translateX(1rem)) or it can be unit-less (e.g. scale(2)). css-Properties that are not animatable (especially string-based like background-position(top)), will just switch between start and end value without any transition.

Syntax

The syntax is quite simple—you just write the css-properties like you would with regular CSS, using dashed-case. So if you need to animate the CSS background-color, you just write the background-color. The property value is defined in the parenthesis that follows the property name. Each property can also contain an Options.

Old (CSS) way

To show some real-life example, lets use the above-mentioned background-color. We are going to change the background color of the div element on the hover. This is how we do it in the regular CSS:

New (TorusKit) way

The above regular CSS example took four lines of code. Now lets do the same with the TorusKit syntax right in the HTML:

As you can see, you don’t need to bother with any CSS files. Just write it in the HTML data-tor attribute. Not to mention that we have written it in just one line of code, and using the Shorthands we have used even less characters.

Examples

These examples compare the properties that can be animated (number-based values) and the ones that cannot (string-based).

Animatable properties

The core of TorusKit’s animation capabilities is to animate properties with number-based values. They can be with a unit or unit-less. If you don’t define the Initial values explicitly, the default one will be used. If you have some CSS styling already applied, TorusKit can use it as an initial value - this doesn’t apply to the transform property.

Non-animatable properties

Smooth transition cannot be applied to string-based values, so they just switch from the initial value to the final one.