Radiate animation
Create a radiate CSS animation effect right in the HTML code
Overview
The radiate built-in loop creates a radiate effect by spreading and fading a box-shadow of an element in an infinite animation loop.
Syntax
Default
The default loop:radiate() without any values or options uses these default parameters:
| Name | Color | Options |
|---|---|---|
radiate |
rgba(0, 0, 0, 1) |
spread: 1rem, duration: 1s |
Custom values
You can also customize the animation by changing the value and options.
Usage
Default
In order to use a radiate animation with the default settings, just use loop:radiate().
Radiate
Custom value
Change the default box-shadow color by defining a custom color value. In this case we’re using a #aa00ff.
Radiate
Available options
Here is the list of available options for the radiate animation loop.
duration
Change the duration of the animation speed.
Radiate
spread
Change the spread amount of the animated box-shadow effect by using a spread option.
Radiate