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