Running the Script

The animation property combines everything: name, time, repeat count, and direction.

1. Order Matters

/* name | duration | timing | delay | iteration | direction | fill-mode */
animation: pulse 1s ease-in 0.5s infinite alternate forwards;

2. Staggered Animations (Cascade Delays)

This is the secret of " expensive " interface. If you have a list of 5 elements, don't animate them simultaneously. Give each a different animation-delay.

.item:nth-child(1) { animation-delay: 0.1s; }
.item:nth-child(2) { animation-delay: 0.2s; }
.item:nth-child(3) { animation-delay: 0.3s; }