Background CSS property

Overview

Since the background CSS property contains multiple sub-properties (like background-color, background-image, or background-position), we recommend using a granular approach when animating these properties. Animate each background-* property separately, as this ensures that only the intended property is affected. This also prevents potential issues that may arise when multiple properties are combined and don’t align correctly during animation.

Examples

The examples below demonstrate how to use various background-* properties with TorusKit. While these examples use the hover or animate trigger, you can apply any other trigger that is available.

Initial value

Sometimes you need to start the animation, (or just style the element) from certain predefined state - an initial value. Because the TorusKit process the elements before the render, there is no Flash of unstyled content, so the styles are applied immediately after the page load.

Discrete timeline

A discrete timeline requires only two values—an initial value (optional) and a final one. This is the simplest way to animate CSS properties. In this example, the background-color property is animated to a final value of #ff00a9. In this case, the initial value is computed automatically from the element’s CSS.

Sequenced timeline

A sequenced timeline animates properties in a sequence (series) of steps. When one step finishes, the next one begins. Each step can include one or multiple properties. In this example, we animate the background-color properties in various format (hex, rgba and hsl)

Offset timeline

In an offset timeline, intermediate steps in an animation sequence are defined by percentage offsets. This example demonstrates how to animate the above example, but with using the offsets this time.

In this case, we have omitted the first step with an offset of 0%, which is typically used to set the initial values for all properties. As a result, TorusKit retrieves the initial values from the current element’s style. This works because we are using the background-color property, rather than the background, which encompasses multiple background-* properties. You cannot omit the first step if you are animating the whole background property.

Properties

The list of available properties for the background property.

background

Example

In order to use the background property, you must define the initial value.

Multi layer

The CSS background property can contain multiple layers, originally separated by commas in CSS. In TorusKit, however, you must separate each layer using a pipe |.

Warning: You must define the initial values, and the number of animated values (and layers) must match the number of initial values!

Url

Here we are animating the position of the background image using the url(). The initial position is 50%.

Gradient

You can also easily animate the CSS gradients using this approach.

background-color

Example

Initial

background-image

Example

The initial value must be defined, even that it’s transparent, like in this case.

Initial

Utilities

bg-opacity

You can control the background-color opacity using the bg-opacity utility. It will automatically get the background color of an element and change just the alpha channel of rgba color without touching the other color channels.

bg-lighten

Lighten the background color using the bg-lighten utility. Based on the specified strength, this utility increases the r, g, and b channels of an rgb color. For example, applying bg-lighten(100) to rgba(0, 50, 80, 1) adds 100 to each channel, resulting in rgba(100, 150, 180, 1), creating a lighter shade.

bg-darken

Lighten the background color using the bg-darken utility. Based on the specified strength, this utility increases the r, g, and b channels of an rgb color. For example, applying bg-darken(100) to rgba(0, 50, 80, 1) reduces 100 to each channel, resulting in rgba(100, 150, 180, 1), creating a lighter shade.