Pulse animation
Create a pulse CSS animation effect right in the HTML code
Overview
The pulse built-in loop makes the element scale-out back and forth in an infinite animation loop.
Syntax
Default
The default loop:pulse() without any values or options uses these default parameters:
| Name | Start value | End value | Options |
|---|---|---|---|
pulse |
0.2 |
1 + 0.2 |
duration: 1s |
Custom values
You can also customize the animation by changing the value and options.
Usage
Default
By default, the pulse animation oscillates by 0.2 around the default scale of 1. In other words, it increases and decreases the scale by 0.2 using the 1 (+/-) 0.2 calculation.
Pulse
Custom value
Using loop: pulse(0.8) changes the oscillating value to 0.8, so the animation varies from 0.2 to 1.8 using the calculation 1 +/- 0.8.
Pulse
Available options
Here is the list of available options for the pulse animation loop.
duration
Change the duration of the animation speed.
Pulse