Wobble animation
Create a wobble CSS animation effect right in the HTML code
Overview
The wobble built-in loop moves the element back and forth horizontally (wobble-h) or vertically (wobble-v) in an infinite animation loop.
Syntax
Default
The default loop:wobble-h() or loop:wobble-v() without any values or options uses these default parameters:
| Name | Start value | End value | Options |
|---|---|---|---|
wobble |
-1rem |
1rem |
duration: 1s |
Custom values
You can also customize the animation by changing the value and options.
Usage
Default
In order to use a wobble animation with the default settings, just use loop:wobble-h() or loop:wobble-v().
wobble-h
wobble-v
Custom value
To make the element rotate more or less, set your own custom value.
wobble-h
wobble-v
Available options
Here is the list of available options for the wobble animation loop.
duration
Change the duration of the animation speed.
wobble-h