Bring your icons into life via adding simple classes!
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.
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>
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>
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).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>
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>
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>
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>
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>
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>
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>
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 .
Project.
Community.
Copyright © 2023 JTBLabs - All rights reserved.