Fly animation
Create a fly CSS animation effect right in the HTML code
Overview
The fly built-in loop makes the element fly around its horizontal center in an infinite animation loop.
Syntax
Default
The default loop:fly() without any values or options uses these default parameters:
| Name | Start value | End value | Options |
|---|---|---|---|
fly |
-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 fly animation with the default settings, just use loop:fly().
Fly
Custom value
Using the loop:fly(-2rem) with the custom value of 2rem makes the element move up and down by 2rem in both sides.
Fly
Available options
Here is the list of available options for the fly animation loop.
duration
Change the duration of the animation speed.
Fly