Tada animation
Create an attention-grabbing CSS animation effect right in the HTML code
Overview
The tada CSS animation effect is a playful, attention-grabbing animation that makes an element bounce and scale, often used for emphasis or to highlight something important on a webpage. The effect involves a combination of rotations and scaling. It is commonly used on buttons, icons, or notifications to add an extra flair.
Syntax
Default
The default loop:tada() without any values or options uses these default parameters:
| Name | Default value | Options |
|---|---|---|
tada |
0.1 |
duration: 0.5s |
Custom values
You can also customize the animation by changing the value and options.
Usage
Default
By default, the tada animation uses the amount value of 0.1 that affects the rotation and scale of an effect.
Custom value
Using loop: tada(0.5) changes the amount_ value to 0.5, so the rotation and scale increases.
Available options
Here is the list of available options for the tada animation loop.
duration
Change the duration of the animation speed.