Home Icons Docs Blog
v1.1 - Ashy tit
Home Icons Docs Blog v1.1 - Ashy tit
v1.1 - Ashy tit Latestv1.0 - Bluethroat
v1.1 - Ashy tit Latestv1.0 - Bluethroat
Sections AboutGetting startedUsageIntegrationHow to useStylingAnimatingDig deeperUpcoming releasesChange logContributeLicence
Animating

Bring your icons into life via adding simple classes!

About

If you do not want to use default icons and give them a soul in your projects, animation is one of the best method you can use. So far in version 1.1 - Ashy tit we have defined 11 different animation classes.

Pulse

To animate your icons like a heart-beat you can simply add .jtbI-pulse class into them.

							<!-- Pulse animation -->
<i class='jtbIR-heart-filled jtbI-pulse'></i>
						

The pulse animation comes with three additional attributes if you want to manipulate them.

  • --jtbI-duration: specifies the duration of animation (default 1s),
  • --jtbI-type: specifies the type of animation (default infinite),
  • --jtbI-scale: specifies the scale of beating effect (default 0.70).

To make animation slower / faster you can specify it via --jtbI-duration.

								<!-- Slower -->
<i class='jtbIR-heart-filled jtbI-pulse' style='--jtbI-duration: 2s'></i>

<!-- Faster -->
<i class='jtbIR-heart-filled jtbI-pulse' style='--jtbI-duration: 0.5s'></i>
							

To make the animation work only specific amount of number, you can specify it via --jtbI-type.

								<!-- Animates only once -->
<i class='jtbIR-heart-filled jtbI-pulse' style='--jtbI-type: 1'></i>

<!-- Animates twice -->
<i class='jtbIR-heart-filled jtbI-pulse' style='--jtbI-type: 2'></i>
							

To change the scale of animation, you can specify it via --jtbI-scale.

								<!-- Scales between 0.3 - 1 -->
<i class='jtbIR-heart-filled jtbI-pulse' style='--jtbI-scale: 0.3'></i>

<!-- Scales between 0.9 - 1 -->
<i class='jtbIR-heart-filled jtbI-pulse' style='--jtbI-scale: 0.9'></i>
							

Fade

To fade-out and fade-in your icons as animation you can simply add .jtbI-fade class into them.

							<!-- Fade animation -->
<i class='jtbIR-heart-filled jtbI-fade'></i>
						

The fade animation comes with four additional attributes if you want to manipulate them.

  • --jtbI-duration: specifies the duration of animation (default 1s),
  • --jtbI-type: specifies the type of animation (default infinite),
  • --jtbI-minVal: specifies the minimum opacity level of fade effect (default 0.6).
  • --jtbI-maxVal: specifies the maximum opacity level of fade effect (default 1).

To make animation slower / faster you can specify it via --jtbI-duration.

								<!-- Slower -->
<i class='jtbIR-star-filled jtbI-fade' style='--jtbI-duration: 2s'></i>

<!-- Faster -->
<i class='jtbIR-star-filled jtbI-fade' style='--jtbI-duration: 0.5s'></i>
							

To make the animation work only specific amount of number, you can specify it via --jtbI-type.

								<!-- Animates only once -->
<i class='jtbIR-star-filled jtbI-fade' style='--jtbI-type: 1'></i>

<!-- Animates twice -->
<i class='jtbIR-star-filled jtbI-fade' style='--jtbI-type: 2'></i>
							

To change the scale of fade in animation, you can specify it via --jtbI-minVal and --jtbI-maxVal attributes.

								<!-- Scales between 0.3 - 1 -->
<i class='jtbIR-star-filled jtbI-fade' style='--jtbI-minVal: 0.3'></i>

<!-- Scales between 0.9 - 1 -->
<i class='jtbIR-star-filled jtbI-fade' style='--jtbI-minVal: 0.9'></i>
							

Pulse & fade

To combine pulse and fade animations, you can simply add .jtbI-pulse-fade class into your elements.

							<!-- Pulse & Fade animation -->
<i class='jtbIR-lightbulb-on jtbI-pulse-fade'></i>
						

Since the pulse & fade animation is just a combination of pulse and fade animations, you can use all theri manipulation attributes in here too.

  • --jtbI-duration: specifies the duration of animation (default 1s),
  • --jtbI-type: specifies the type of animation (default infinite),
  • --jtbI-scale: specifies the scale of beating effect (default 0.70).
  • --jtbI-minVal: specifies the minimum opacity level of fade effect (default 0.6).
  • --jtbI-maxVal: specifies the maximum opacity level of fade effect (default 1).

Bounce

To make your icons bounce, you can simply add .jtbI-bounce class into your elements.

							<!-- Bounce animation -->
<i class='jtbIR-envelope jtbI-bounce'></i>
						

The bounce animation comes with three additional attributes if you want to manipulate them.

  • --jtbI-duration: specifies the duration of animation (default 1s),
  • --jtbI-type: specifies the type of animation (default infinite),

To make animation slower / faster you can specify it via --jtbI-duration.

								<!-- Slower -->
<i class='jtbIR-envelope jtbI-bounce' style='--jtbI-duration: 2s'></i>

<!-- Faster -->
<i class='jtbIR-envelope jtbI-bounce' style='--jtbI-duration: 0.5s'></i>
							

To make the animation work only specific amount of number, you can specify it via --jtbI-type.

								<!-- Animates only once -->
<i class='jtbIR-envelope jtbI-bounce' style='--jtbI-type: 1'></i>

<!-- Animates twice -->
<i class='jtbIR-envelope jtbI-bounce' style='--jtbI-type: 2'></i>
							

Jelly

To make your icons a little bit jelly, you can simply add .jtbI-jelly class into your elements.

							<!-- Jelly animation -->
<i class='jtbIR-balloon jtbI-jelly'></i>
						

The jelly animation comes with three additional attributes if you want to manipulate them.

  • --jtbI-duration: specifies the duration of animation (default 1s),
  • --jtbI-type: specifies the type of animation (default infinite),

To make animation slower / faster you can specify it via --jtbI-duration.

								<!-- Slower -->
<i class='jtbIR-balloon jtbI-jelly' style='--jtbI-duration: 2s'></i>

<!-- Faster -->
<i class='jtbIR-balloon jtbI-jelly' style='--jtbI-duration: 0.5s'></i>
							

To make the animation work only specific amount of number, you can specify it via --jtbI-type.

								<!-- Animates only once -->
<i class='jtbIR-balloon jtbI-jelly' style='--jtbI-type: 1'></i>

<!-- Animates twice -->
<i class='jtbIR-balloon jtbI-jelly' style='--jtbI-type: 2'></i>
							

Swing

To make your icons perform a swing action as animation you can simply add .jtbI-swing class into them.

							<!-- Swing animation -->
<i class='jtbIR-bell jtbI-swing'></i>
						

The swing animation comes with three additional attributes if you want to manipulate them.

  • --jtbI-duration: specifies the duration of animation (default 1s),
  • --jtbI-type: specifies the type of animation (default infinite),
  • --jtbI-transform-origin: specifies the transform origin of swing effect (default top center).

To make animation slower / faster you can specify it via --jtbI-duration.

								<!-- Slower -->
<i class='jtbIR-bell jtbI-swing' style='--jtbI-duration: 2s'></i>

<!-- Faster -->
<i class='jtbIR-bell jtbI-swing' style='--jtbI-duration: 0.5s'></i>
							

To make the animation work only specific amount of number, you can specify it via --jtbI-type.

								<!-- Animates only once -->
<i class='jtbIR-bell jtbI-swing' style='--jtbI-type: 1'></i>

<!-- Animates twice -->
<i class='jtbIR-bell jtbI-swing' style='--jtbI-type: 2'></i>
							

To change the transform origin of swing in animation, you can specify it via --jtbI-transform-origin attribute.

								<!-- Bottom Center Originated -->
<i class='jtbIR-bell jtbI-swing' style='--jtbI-transform-origin: bottom center'></i>
							

Shake

To make your icons perform a shake action as animation you can simply add .jtbI-shake class into them.

							<!-- Shake animation -->
<i class='jtbIR-alarm-clock jtbI-shake'></i>
						

The shake animation comes with two additional attributes if you want to manipulate them.

  • --jtbI-duration: specifies the duration of animation (default 1s),
  • --jtbI-type: specifies the type of animation (default infinite),

To make animation slower / faster you can specify it via --jtbI-duration.

								<!-- Slower -->
<i class='jtbIR-alarm-clock jtbI-shake' style='--jtbI-duration: 2s'></i>

<!-- Faster -->
<i class='jtbIR-alarm-clock jtbI-shake' style='--jtbI-duration: 0.5s'></i>
							

To make the animation work only specific amount of number, you can specify it via --jtbI-type.

								<!-- Animates only once -->
<i class='jtbIR-alarm-clock jtbI-shake' style='--jtbI-type: 1'></i>

<!-- Animates twice -->
<i class='jtbIR-alarm-clock jtbI-shake' style='--jtbI-type: 2'></i>
							

Flip

To make your icons perform a flip action horizontally you can add .jtbI-flip class into them.

							<!-- Flip animation -->
<i class='jtbIR-compass jtbI-flip'></i>
						

The flip animation comes with two additional attributes if you want to manipulate them.

  • --jtbI-duration: specifies the duration of animation (default 1s),
  • --jtbI-type: specifies the type of animation (default infinite),

To make animation slower / faster you can specify it via --jtbI-duration.

								<!-- Slower -->
<i class='jtbIR-compass jtbI-flip' style='--jtbI-duration: 2s'></i>

<!-- Faster -->
<i class='jtbIR-compass jtbI-flip' style='--jtbI-duration: 0.5s'></i>
							

To make the animation work only specific amount of number, you can specify it via --jtbI-type.

								<!-- Animates only once -->
<i class='jtbIR-compass jtbI-flip' style='--jtbI-type: 1'></i>

<!-- Animates twice -->
<i class='jtbIR-compass jtbI-flip' style='--jtbI-type: 2'></i>
							

Flip vertical

To make your icons perform a flip action vertically you can add .jtbI-flip-vertical class into them.

							<!-- Flip (Vertical) animation -->
<i class='jtbIR-map jtbI-flip-vertical'></i>
						

The flip-vertical animation comes with two additional attributes if you want to manipulate them.

  • --jtbI-duration: specifies the duration of animation (default 1s),
  • --jtbI-type: specifies the type of animation (default infinite),

To make animation slower / faster you can specify it via --jtbI-duration.

								<!-- Slower -->
<i class='jtbIR-map jtbI-flip-vertical' style='--jtbI-duration: 2s'></i>

<!-- Faster -->
<i class='jtbIR-map jtbI-flip-vertical' style='--jtbI-duration: 0.5s'></i>
							

To make the animation work only specific amount of number, you can specify it via --jtbI-type.

								<!-- Animates only once -->
<i class='jtbIR-map jtbI-flip-vertical' style='--jtbI-type: 1'></i>

<!-- Animates twice -->
<i class='jtbIR-map jtbI-flip-vertical' style='--jtbI-type: 2'></i>
							

Spin

To make your icons perform a rotation animation with a delay in it, you can add .jtbI-spin class into them.

							<!-- Spin animation -->
<i class='jtbIR-spinner jtbI-spin'></i>
						

The spin animation comes with two additional attributes if you want to manipulate them.

  • --jtbI-duration: specifies the duration of animation (default 1s),
  • --jtbI-type: specifies the type of animation (default infinite),

To make animation slower / faster you can specify it via --jtbI-duration.

								<!-- Slower -->
<i class='jtbIR-spinner jtbI-spin' style='--jtbI-duration: 2s'></i>

<!-- Faster -->
<i class='jtbIR-spinner jtbI-spin' style='--jtbI-duration: 0.5s'></i>
							

To make the animation work only specific amount of number, you can specify it via --jtbI-type.

								<!-- Animates only once -->
<i class='jtbIR-spinner jtbI-spin' style='--jtbI-type: 1'></i>

<!-- Animates twice -->
<i class='jtbIR-spinner jtbI-spin' style='--jtbI-type: 2'></i>
							

Rotate

To make your icons perform a rotation animation smoothly, you can add .jtbI-rotate class into them.

							<!-- Rotate animation -->
<i class='jtbIR-loader jtbI-rotate'></i>
						

The rotate animation comes with two additional attributes if you want to manipulate them.

  • --jtbI-duration: specifies the duration of animation (default 1s),
  • --jtbI-type: specifies the type of animation (default infinite),

To make animation slower / faster you can specify it via --jtbI-duration.

								<!-- Slower -->
<i class='jtbIR-loader jtbI-rotate' style='--jtbI-duration: 2s'></i>

<!-- Faster -->
<i class='jtbIR-loader jtbI-rotate' style='--jtbI-duration: 0.5s'></i>
							

To make the animation work only specific amount of number, you can specify it via --jtbI-type.

								<!-- Animates only once -->
<i class='jtbIR-loader jtbI-rotate' style='--jtbI-type: 1'></i>

<!-- Animates twice -->
<i class='jtbIR-loader jtbI-rotate' style='--jtbI-type: 2'></i>
							

JTB Icons.

A powerful icon libary that tries to solve all your icon-related problems on your projects with its different icon types, customized styling classes, icon-focused animations and more features. Also is free, and will be free forever!

Made by JTBLabs with .

Copyright © 2024 JTBLabs - All rights reserved.