CSS animations

SVG animations exported using the CSS format are extremely versatile and have many advantages, including support for hardware-accelerated graphics. They can be embedded as background images or used with the img or object tag.

Compatibility table

As with other formats, it also has disadvantages, the major one being the lack of support for morph, filter, and offset path animations in many browsers.

Interactivity settings

The following interactivity settings are provided:

Start animation

Configure when to start the animation. The available options are:

• On load - Start the animation when the page loads.
• On mouse over - Start the animation when the mouse cursor is over the image.
• Programatically - Start the animation programatically. See Control animation progress.

On mouse over

This field is available only when Start animation is set to On load. Tell what action to take place after the animation has stareted and the mouse cursor is over the image. The options are:

• Nothing - Do nothing.
• Pause - Pause the animation.
• Reverse - Play the animation in reverse.

On mouse out

This field is available only when Start animation is set to On mouse over. You can use this field to configure what happens when the mouse cursor is no longer over the animation container. The options are:

• Pause - Pause the animation.
• Stop - Stop the animation.

Control animation progress

Below is a short example of how to programmatically control the animation progress using the --animation-progress variable. In order for this to work, you must embed the animation using the <object> tag.

let progress = 0.5;
// get the <object> element
const element = document.getElementById("my-animation");

// wait until is loaded
element.addEventListener("load", () => {
    // change the animation progress
    element.contentDocument
        .firstElementChild
        .style
        .setProperty("--animation-progress", progress.toString());
});

To play or pause the animation, one could use the --animation-play-state variable. This variable can take two values: running or paused.

// play the animation
element.contentDocument
    .firstElementChild
    .style
    .setProperty("--animation-play-state", "running");

To change the animation's duration, use the --animation-duration variable.

// change duration
element.contentDocument
    .firstElementChild
    .style
    .setProperty("--animation-duration", "3500ms");