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>