Opacity CSS property

Overview

The opacity CSS property controls the transparency of elements. With TorusKit, you can leverage the opacity property using either the native CSS syntax or shorthand notation (o for opacity), enabling smooth transitions and animations.

Syntax

To animate the opacity, use the standard CSS opacity syntax, or the o shorthand followed by the value defined in the parenthesis.

Examples

The examples below illustrate how to use opacity for hover effects, initial states, and animation timelines.

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 opacity property is animated to a final value of 0.5. 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 opacity and color properties.

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.