CSS3 Animations

The table below will show you a preview of all the possible CSS3 animations you can apply to your icon. Animations can be applied as follows:

Default Animation:
This animation will always be active, just like you see on this page.

Hover Animation:
This animation will only be active when hovering over the icon element.

Viewport Animation:
This animation will be triggered once an icon element comes into browser view the very first time.

#Animation NameDefault (Class Name)Hover (Class Name)Viewport (Class Name)Animation Effect
Attention Seekers
1Flashts-infinite-css-flashts-hover-css-flashts-viewport-css-flash
2Hingets-infinite-css-hingets-hover-css-hingets-viewport-css-hinge
3Roll Ints-infinite-css-rollInts-hover-css-rollInts-viewport-css-rollIn
4Roll Outts-infinite-css-rollOutts-hover-css-rollOutts-viewport-css-rollOut
5Rotate Fullts-infinite-css-rotateFullts-hover-css-rotateFullts-viewport-css-rotateFull
6Rubberbandts-infinite-css-rubberBandts-hover-css-rubberBandts-viewport-css-rubberBand
7Shakets-infinite-css-shakets-hover-css-shakets-viewport-css-shake
8Spints-infinite-css-spints-hover-css-spints-viewport-css-spin
9Swingts-infinite-css-swingts-hover-css-swingts-viewport-css-swing
10Tadats-infinite-css-tadats-hover-css-tadats-viewport-css-tada
Bounce Entries
11Bounce Ints-infinite-css-bounceInts-hover-css-bounceInts-viewport-css-bounceIn
12Bounce In Downts-infinite-css-bounceInDownts-hover-css-bounceInDownts-viewport-css-bounceInDown
13Bounce In Leftts-infinite-css-bounceInLeftts-hover-css-bounceInLeftts-viewport-css-bounceInLeft
14Bounce In Rightts-infinite-css-bounceInRightts-hover-css-bounceInRightts-viewport-css-bounceInRight
15Bounce In Upts-infinite-css-bounceInUpts-hover-css-bounceInUpts-viewport-css-bounceInUp
Bounce Exits
16Bounce Outts-infinite-css-bounceOutts-hover-css-bounceOutts-viewport-css-bounceOut
17Bounce Out Downts-infinite-css-bounceOutDownts-hover-css-bounceOutDownts-viewport-css-bounceOutDown
18Bounce Out Leftts-infinite-css-bounceOutLeftts-hover-css-bounceOutLeftts-viewport-css-bounceOutLeft
19Bounce Out Rightts-infinite-css-bounceOutRightts-hover-css-bounceOutRightts-viewport-css-bounceOutRight
20Bounce Out Upts-infinite-css-bounceOutUpts-hover-css-bounceOutUpts-viewport-css-bounceOutUp
Fade Entries
21Fade Ints-infinite-css-fadeInts-hover-css-fadeInts-viewport-css-fadeIn
22Fade In Downts-infinite-css-fadeInDownts-hover-css-fadeInDownts-viewport-css-fadeInDown
23Fade In Down Bigts-infinite-css-fadeInDownBigts-hover-css-fadeInDownBigts-viewport-css-fadeInDownBig
24Fade In Leftts-infinite-css-fadeInLeftts-hover-css-fadeInLeftts-viewport-css-fadeInLeft
25Fade In Left Bigts-infinite-css-fadeInLeftBigts-hover-css-fadeInLeftBigts-viewport-css-fadeInLeftBig
26Fade In Rightts-infinite-css-fadeInRightts-hover-css-fadeInRightts-viewport-css-fadeInRight
27Fade In Right Bigts-infinite-css-fadeInRightBigts-hover-css-fadeInRightBigts-viewport-css-fadeInRightBig
28Fade In Upts-infinite-css-fadeInUpts-hover-css-fadeInUpts-viewport-css-fadeInUp
29Fade In Up Bigts-infinite-css-fadeInUpBigts-hover-css-fadeInUpBigts-viewport-css-fadeInUpBig
Fade Exits
30Fade Outts-infinite-css-fadeOutts-hover-css-fadeOutts-viewport-css-fadeOut
31Fade Out Downts-infinite-css-fadeOutDownts-hover-css-fadeOutDownts-viewport-css-fadeOutDown
32Fade Out Down Bigts-infinite-css-fadeOutDownBigts-hover-css-fadeOutDownBigts-viewport-css-fadeOutDownBig
33Fade Out Leftts-infinite-css-fadeOutLeftts-hover-css-fadeOutLeftts-viewport-css-fadeOutLeft
34Fade Out Left Bigts-infinite-css-fadeOutLeftBigts-hover-css-fadeOutLeftBigts-viewport-css-fadeOutLeftBig
35Fade Out Rightts-infinite-css-fadeOutRightts-hover-css-fadeOutRightts-viewport-css-fadeOutRight
36Fade Out Right Bigts-infinite-css-fadeOutRightBigts-hover-css-fadeOutRightBigts-viewport-css-fadeOutRightBig
37Fade Out Upts-infinite-css-fadeOutUpts-hover-css-fadeOutUpts-viewport-css-fadeOutUp
38Fade Out Up Bigts-infinite-css-fadeOutUpBigts-hover-css-fadeOutUpBigts-viewport-css-fadeOutUpBig
Flippers
39Flip In Xts-infinite-css-flipInXts-hover-css-flipInXts-viewport-css-flipInX
40Flip In Yts-infinite-css-flipInYts-hover-css-flipInYts-viewport-css-flipInY
41Flip Out Xts-infinite-css-flipOutXts-hover-css-flipOutXts-viewport-css-flipOutX
42Flip Out Yts-infinite-css-flipOutYts-hover-css-flipOutYts-viewport-css-flipOutY
Lightspeed
43Light Speed Ints-infinite-css-lightSpeedInts-hover-css-lightSpeedInts-viewport-css-lightSpeedIn
44Light Speed Outts-infinite-css-lightSpeedOutts-hover-css-lightSpeedOutts-viewport-css-lightSpeedOut
Pulsars
45Pulse Normalts-infinite-css-pulsets-hover-css-pulsets-viewport-css-pulse
46Pulse Growts-infinite-css-pulseGrowts-hover-css-pulseGrowts-viewport-css-pulseGrow
47Pulse Shrinkts-infinite-css-pulseShrinkts-hover-css-pulseShrinkts-viewport-css-pulseShrink
Rotate Entries
48Rotate Ints-infinite-css-rotateInts-hover-css-rotateInts-viewport-css-rotateIn
49Rotate In Down Leftts-infinite-css-rotateInDownLeftts-hover-css-rotateInDownLeftts-viewport-css-rotateInDownLeft
50Rotate In Down Rightts-infinite-css-rotateInDownRightts-hover-css-rotateInDownRightts-viewport-css-rotateInDownRight
51Rotate In Up Leftts-infinite-css-rotateInUpLeftts-hover-css-rotateInUpLeftts-viewport-css-rotateInUpLeft
52Rotate In Up Rightts-infinite-css-rotateInUpRightts-hover-css-rotateInUpRightts-viewport-css-rotateInUpRight
Rotate Exits
53Rotate Outts-infinite-css-rotateOutts-hover-css-rotateOutts-viewport-css-rotateOut
54Rotate Out Down Leftts-infinite-css-rotateOutDownLeftts-hover-css-rotateOutDownLeftts-viewport-css-rotateOutDownLeft
55Rotate Out Down Rightts-infinite-css-rotateOutDownRightts-hover-css-rotateOutDownRightts-viewport-css-rotateOutDownRight
56Rotate Out Up Leftts-infinite-css-rotateOutUpLeftts-hover-css-rotateOutUpLeftts-viewport-css-rotateOutUpLeft
57Rotate Out Up Rightts-infinite-css-rotateOutUpRightts-hover-css-rotateOutUpRightts-viewport-css-rotateOutUpRight
Slide Entries
58Slide In Upts-infinite-css-slideInUpts-hover-css-slideInUpts-viewport-css-slideInUp
59Slide In Downts-infinite-css-slideInDownts-hover-css-slideInDownts-viewport-css-slideInDown
60Slide In Leftts-infinite-css-slideInLeftts-hover-css-slideInLeftts-viewport-css-slideInLeft
61Slide In Rightts-infinite-css-slideInRightts-hover-css-slideInRightts-viewport-css-slideInRight
Slide Exits
62Slide Out Upts-infinite-css-slideOutUpts-hover-css-slideOutUpts-viewport-css-slideOutUp
63Slide Out Downts-infinite-css-slideOutDownts-hover-css-slideOutDownts-viewport-css-slideOutDown
64Slide Out Leftts-infinite-css-slideOutLeftts-hover-css-slideOutLeftts-viewport-css-slideOutLeft
65Slide Out Rightts-infinite-css-slideOutRightts-hover-css-slideOutRightts-viewport-css-slideOutRight
Wobblers
66Wobble Standardts-infinite-css-wobblets-hover-css-wobblets-viewport-css-wobble
67Wobble Verticalts-infinite-css-wobbleVerticalts-hover-css-wobbleVerticalts-viewport-css-wobbleVertical
68Wobble Horizontalts-infinite-css-wobbleHorizontalts-hover-css-wobbleHorizontalts-viewport-css-wobbleHorizontal
69Wobble Topts-infinite-css-wobbleTopts-hover-css-wobbleTopts-viewport-css-wobbleTop
70Wobble Bottomts-infinite-css-wobbleBottomts-hover-css-wobbleBottomts-viewport-css-wobbleBottom