Filter CSS property

Learn how to animate individual CSS filter properties

Overview

Animating the CSS filter property is straightforward with TorusKit, as it allows you to animate each sub-property individually. This means you can customize each filter sub-property with options like duration, iterations, and more.

Syntax

Syntax for the filter property uses the filter() keyword with one of the available sub-property. You can define multiple properties, but each must be wrapped in the separate filter wrapper.

Examples

The examples below demonstrate how to use various filter 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.

Initial

Multiple clustered values

Clusters provide a great way to simplify the definition of multiple properties that use the same trigger. In this example, instead of defining the hover trigger separately for both the scale and rotate properties, we group them into a cluster with a single, shared hover trigger. The options defined in the cluster are now shared by all the properties within it.

Hover

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 blur property is animated to a final value of 3px, with the initial value of 0px being used by default.

Animate

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 drop-shadow, opacity, and sepia properties sequentially, with each step starting after the previous one completes.

Animate

Offset timeline

In an offset timeline, intermediate steps in an animation sequence are defined by percentage offsets. This example demonstrates how to animate the drop-shadow, opacity, and sepia sub-properties with offsets. The first step is used to define the initial values of each properties used in the animation.

Animate

Combination

You can combine different timeline types, even using the same triggers. In this example, we use two animate triggers with different property animations running simultaneously. The animation for the hover trigger is then smoothly applied when you hover over the element.

Animate

Properties

The list of available properties for the CSS filter.

blur

Name Default Shorthand Example Shorthand Example
blur 0px - blur(3px) -
Hover

brightness

Name Default Shorthand Example Shorthand Example
brightness 100% - brightness(50%) -
Hover

contrast

Name Default Shorthand Example Shorthand Example
contrast 100% - contrast(200%) -
Hover

drop-shadow

Name Default Shorthand Example Shorthand Example
drop-shadow 0px 0px 0px rgba(0,0,0,0) - drop-shadow(10px 10px 20px rgba(0,0,255,1)) -
Hover

drop-shadow

Name Default Shorthand Example Shorthand Example
drop-shadow 0px 0px 0px rgba(0,0,0,0) - drop-shadow(10px 10px 20px rgba(0,0,255,1)) -
Hover

grayscale

Name Default Shorthand Example Shorthand Example
grayscale 0% - grayscale(50%) -
Hover

hue-rotate

Name Default Shorthand Example Shorthand Example
hue-rotate 0deg - hue-rotate(90deg) -
Hover

invert

Name Default Shorthand Example Shorthand Example
invert 0% - invert(50%) -
Hover

opacity

Name Default Shorthand Example Shorthand Example
opacity 100% - opacity(30%) -
Hover

saturate

Name Default Shorthand Example Shorthand Example
saturate 100% - saturate(30%) -
Hover

sepia

Name Default Shorthand Example Shorthand Example
sepia 0% - sepia(60%) -
Hover