Animate the Icons
Animate your icons with pre built CSS animations using classes
bx-spin
,bx-tada
,bx-flashing
,bx-burst
,bx-fade-left
,bx-fade-right
,bx-breathe
,bx-beat
,bx-wiggle
& bx-bounce
You can change the speed of the animation
with the animation-duration
property & to change the number of times the animation
takes place with the property animation-iteration-count
in CSS
<i class='bx bxs-like bx-spin'></i>
<i class='bx bxs-like bx-tada'></i>
<i class='bx bxs-like bx-flashing'></i>
<i class='bx bxs-like bx-burst'></i>
<i class='bx bxs-like bx-fade-left'></i>
<i class='bx bxs-like bx-fade-right'></i>
<i class='bx bxs-like bx-fade-up'></i>
<i class='bx bxs-like bx-fade-down'></i>
<i class='bx bxs-like bx-breathe'></i>
<i class='bx bxs-like bx-beat'></i>
<i class='bx bxs-like bx-wiggle'></i>
<i class='bx bxs-like bx-bounce'></i>
Animation on Hover
Animate your icons on hover with pre built CSS animations using classes bx-spin-hover
,bx-tada-hover
,bx-flashing-hover
,bx-burst-hover
,bx-fade-left-hover
,bx-fade-right-hover
,
bx-breathe-hover
,bx-beat-hover
,bx-wiggle-hover
& bx-bounce-hover
You can change the speed of the animation
with the animation-duration
property & to change the number of times the animation
takes place with the property animation-iteration-count
in CSS
<i class='bx bxs-like bx-spin-hover'></i>
<i class='bx bxs-like bx-tada-hover'></i>
<i class='bx bxs-like bx-flashing-hover'></i>
<i class='bx bxs-like bx-burst-hover'></i>
<i class='bx bxs-like bx-fade-left-hover'></i>
<i class='bx bxs-like bx-fade-right-hover'></i>
<i class='bx bxs-like bx-fade-up-hover'></i>
<i class='bx bxs-like bx-fade-down-hover'></i>
<i class='bx bxs-like bx-breathe-hover'></i>
<i class='bx bxs-like bx-beat-hover'></i>
<i class='bx bxs-like bx-wiggle-hover'></i>
<i class='bx bxs-like bx-bounce-hover'></i>