Swing animation

Create a swing CSS animation effect right in the HTML code

Overview

The swing built-in loop rotates the element back and forth around its center in an infinite animation loop.

Syntax

Default

The default loop:swing() without any values or options uses these default parameters:

Name Start value End value Options
swing -25deg 25deg duration: 1s

Custom values

You can also customize the animation by changing the value and options.

Usage

Default

In order to use a swing animation with the default settings, just use loop:swing().

Swing

Custom value

To make the element rotate more or less, set your own custom value.

Swing

Available options

Here is the list of available options for the swing animation loop.

duration

Change the duration of the animation speed.

Swing