Animations
Six built-in animation classes — no extra CSS or JavaScript needed.
Animation Classes
| Class | Effect | Default Duration |
|---|---|---|
.trker-spin | Continuous rotation | 1s linear infinite |
.trker-pulse | Opacity fade in/out | 2s ease-in-out infinite |
.trker-beat | Scale up/down (heartbeat) | 0.8s ease-in-out infinite |
.trker-bounce | Vertical bounce | 1s ease infinite |
.trker-shake | Left/right rotation shake | 0.5s ease-in-out infinite |
.trker-fade | Opacity fade (deeper than pulse) | 2s ease-in-out infinite |
Live Preview
trker-spin
trker-pulse
trker-beat
trker-bounce
trker-shake
trker-fade
<i class="trker trker-settings trker-spin"></i>
<i class="trker trker-heart trker-beat text-red-500"></i>
<i class="trker trker-bell trker-shake"></i>Overriding Speed
Override the animation duration with inline CSS or a custom class:
/* Slower spin */
<i class="trker trker-settings trker-spin"
style="animation-duration: 3s"></i>
/* Pause on hover */
<i class="trker trker-settings trker-spin hover:[animation-play-state:paused]"></i>