Overview
Similar to Torus Kit Effects, the loops can also be launched on particular trigger. However, unlike the effects, loop has only two trigger types: hover and active class.
Value units
Because the CSS animation works on different principle than CSS transition, there is no smooth transition between active and idle state. This means, when you hover over the element with the data-loop, the animation will start immediately from the first frame that is defined in the @keyframes. This applies to hovering-out, also.
Syntax
Use data-loop="{trigger}{variant}" to apply a trigger that launches the animation. The {triggers} is one of:
| Trigger | Description |
|---|---|
a: |
Launch the animation loop when the element gets .active class |
s: |
Launch the animation loop when the element gets .show class |
hover: |
Launch the animation loop when the element gets :hover state |
Examples
Hover
Spin
Jump
Pulse
<div data-loop="hover:spin">Spin</div>
<div data-loop="hover:jump">Jump</div>
<div data-loop="hover:pulse">Pulse</div>
Active class
Spin
Jump
Pulse
<div data-loop="a:spin">Spin</div>
<div data-loop="a:jump">Jump</div>
<div data-loop="a:pulse">Pulse</div>