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
First you will need to import animation.css to animate the icons
Copy-paste the stylesheet link into your head to load our CSS
<link href='https://cdn.boxicons.com/fonts/animations.min.css' rel='stylesheet'>Once you add this , you can do the animate for the icons
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>