Orbit animation
Create an orbit CSS animation effect right in the HTML code
Overview
The orbit loop creates an animation where element orbits around a central point, creating a circular movement. It uses CSS rotate to animate the path, but the element itself does not rotate on its axis. Instead, it stays oriented in the same direction while following a circular trajectory around the center.
Syntax
Default
The default loop:orbit() without any values or options uses these default parameters:
| Name | Default distance | Default options |
|---|---|---|
orbit |
1rem |
duration: 2s |
Custom values
You can also customize the animation by changing the value and options.
Usage
Default
In order to use a orbit animation with the default settings, just use loop:orbit().
Custom value
To move the element further from the orbiting center, use your own custom value.
Available options
Here is the list of available options for the orbit animation loop.
duration
Change the duration of the animation speed.