Pro

Introduction

Read about loop animations and how to use them

Torus kit loops are CSS animations that runs in a loop. Use them when you need to attract user attention, mark important element on page, show active element, or other actions that requires to be in constant motion without user interaction.

Some examples of what you can doo with Torus Kit loops:

Image

How it works

Add data-loop={loop} to the element which you want to animate in a loop. Unlike the Effects, the data-loop doesn’t use any action and it’s started immediately and forever.

A {loop} is one of:

  • blink - blink (flash) loop
  • jump - jump (bounce) loop
  • circle - element moves over circular path
  • float - float (levitation) loop
  • pulse - pulsating (scale up and back) loop
  • radiate - radiation (fading color border) loop
  • rotate - rotating loop
  • swing - swing (rotates back and forth) loop
  • wobble-v - vertical wobble (oscillate over y-axis) loop
  • wobble-h - horizontal wobble (oscillate over x-axis) loop

Do not combine data-loop with any element that has transform, opacity and box-shadow applied, because it will interfere with the loop animation keyframes! The best way is to add data-loop into wrapped element.

Example

Add flash loop animation to an element by adding data-loop="blink".

Blink
<div data-loop="blink">Blink</div>