line_graphic_business_37

ADVANCED CSS3 ANIMATIONS

A PREVIEW OF ALL BUILT-IN CSS3 ANIMATION TYPES

The table below will show you a preview of all the possible CSS3 animations you can apply to font icons and a variety of other elements in Visual Composer Extensions. 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 element.

Viewport Animation:
This animation will be triggered once an 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
11Jellots-infinite-css-jellots-hover-css-jellots-viewport-css-jello
Bounce Entries
12Bounce Ints-infinite-css-bounceInts-hover-css-bounceInts-viewport-css-bounceIn
13Bounce In Downts-infinite-css-bounceInDownts-hover-css-bounceInDownts-viewport-css-bounceInDown
14Bounce In Leftts-infinite-css-bounceInLeftts-hover-css-bounceInLeftts-viewport-css-bounceInLeft
15Bounce In Rightts-infinite-css-bounceInRightts-hover-css-bounceInRightts-viewport-css-bounceInRight
16Bounce In Upts-infinite-css-bounceInUpts-hover-css-bounceInUpts-viewport-css-bounceInUp
Bounce Exits
17Bounce Outts-infinite-css-bounceOutts-hover-css-bounceOutts-viewport-css-bounceOut
18Bounce Out Downts-infinite-css-bounceOutDownts-hover-css-bounceOutDownts-viewport-css-bounceOutDown
19Bounce Out Leftts-infinite-css-bounceOutLeftts-hover-css-bounceOutLeftts-viewport-css-bounceOutLeft
20Bounce Out Rightts-infinite-css-bounceOutRightts-hover-css-bounceOutRightts-viewport-css-bounceOutRight
21Bounce Out Upts-infinite-css-bounceOutUpts-hover-css-bounceOutUpts-viewport-css-bounceOutUp
Fade Entries
22Fade Ints-infinite-css-fadeInts-hover-css-fadeInts-viewport-css-fadeIn
23Fade In Downts-infinite-css-fadeInDownts-hover-css-fadeInDownts-viewport-css-fadeInDown
24Fade In Down Bigts-infinite-css-fadeInDownBigts-hover-css-fadeInDownBigts-viewport-css-fadeInDownBig
25Fade In Leftts-infinite-css-fadeInLeftts-hover-css-fadeInLeftts-viewport-css-fadeInLeft
26Fade In Left Bigts-infinite-css-fadeInLeftBigts-hover-css-fadeInLeftBigts-viewport-css-fadeInLeftBig
27Fade In Rightts-infinite-css-fadeInRightts-hover-css-fadeInRightts-viewport-css-fadeInRight
28Fade In Right Bigts-infinite-css-fadeInRightBigts-hover-css-fadeInRightBigts-viewport-css-fadeInRightBig
29Fade In Upts-infinite-css-fadeInUpts-hover-css-fadeInUpts-viewport-css-fadeInUp
30Fade In Up Bigts-infinite-css-fadeInUpBigts-hover-css-fadeInUpBigts-viewport-css-fadeInUpBig
Fade Exits
31Fade Outts-infinite-css-fadeOutts-hover-css-fadeOutts-viewport-css-fadeOut
32Fade Out Downts-infinite-css-fadeOutDownts-hover-css-fadeOutDownts-viewport-css-fadeOutDown
33Fade Out Down Bigts-infinite-css-fadeOutDownBigts-hover-css-fadeOutDownBigts-viewport-css-fadeOutDownBig
34Fade Out Leftts-infinite-css-fadeOutLeftts-hover-css-fadeOutLeftts-viewport-css-fadeOutLeft
35Fade Out Left Bigts-infinite-css-fadeOutLeftBigts-hover-css-fadeOutLeftBigts-viewport-css-fadeOutLeftBig
36Fade Out Rightts-infinite-css-fadeOutRightts-hover-css-fadeOutRightts-viewport-css-fadeOutRight
37Fade Out Right Bigts-infinite-css-fadeOutRightBigts-hover-css-fadeOutRightBigts-viewport-css-fadeOutRightBig
38Fade Out Upts-infinite-css-fadeOutUpts-hover-css-fadeOutUpts-viewport-css-fadeOutUp
39Fade Out Up Bigts-infinite-css-fadeOutUpBigts-hover-css-fadeOutUpBigts-viewport-css-fadeOutUpBig
Flippers
40Flip In Xts-infinite-css-flipInXts-hover-css-flipInXts-viewport-css-flipInX
41Flip In Yts-infinite-css-flipInYts-hover-css-flipInYts-viewport-css-flipInY
42Flip Out Xts-infinite-css-flipOutXts-hover-css-flipOutXts-viewport-css-flipOutX
43Flip Out Yts-infinite-css-flipOutYts-hover-css-flipOutYts-viewport-css-flipOutY
Lightspeed
44Light Speed Ints-infinite-css-lightSpeedInts-hover-css-lightSpeedInts-viewport-css-lightSpeedIn
45Light Speed Outts-infinite-css-lightSpeedOutts-hover-css-lightSpeedOutts-viewport-css-lightSpeedOut
Pulsars
46Pulse Normalts-infinite-css-pulsets-hover-css-pulsets-viewport-css-pulse
47Pulse Growts-infinite-css-pulseGrowts-hover-css-pulseGrowts-viewport-css-pulseGrow
48Pulse Shrinkts-infinite-css-pulseShrinkts-hover-css-pulseShrinkts-viewport-css-pulseShrink
Rotate Entries
49Rotate Ints-infinite-css-rotateInts-hover-css-rotateInts-viewport-css-rotateIn
50Rotate In Down Leftts-infinite-css-rotateInDownLeftts-hover-css-rotateInDownLeftts-viewport-css-rotateInDownLeft
51Rotate In Down Rightts-infinite-css-rotateInDownRightts-hover-css-rotateInDownRightts-viewport-css-rotateInDownRight
52Rotate In Up Leftts-infinite-css-rotateInUpLeftts-hover-css-rotateInUpLeftts-viewport-css-rotateInUpLeft
53Rotate In Up Rightts-infinite-css-rotateInUpRightts-hover-css-rotateInUpRightts-viewport-css-rotateInUpRight
Rotate Exits
54Rotate Outts-infinite-css-rotateOutts-hover-css-rotateOutts-viewport-css-rotateOut
55Rotate Out Down Leftts-infinite-css-rotateOutDownLeftts-hover-css-rotateOutDownLeftts-viewport-css-rotateOutDownLeft
56Rotate Out Down Rightts-infinite-css-rotateOutDownRightts-hover-css-rotateOutDownRightts-viewport-css-rotateOutDownRight
57Rotate Out Up Leftts-infinite-css-rotateOutUpLeftts-hover-css-rotateOutUpLeftts-viewport-css-rotateOutUpLeft
58Rotate Out Up Rightts-infinite-css-rotateOutUpRightts-hover-css-rotateOutUpRightts-viewport-css-rotateOutUpRight
Slide Entries
59Slide In Upts-infinite-css-slideInUpts-hover-css-slideInUpts-viewport-css-slideInUp
60Slide In Downts-infinite-css-slideInDownts-hover-css-slideInDownts-viewport-css-slideInDown
61Slide In Leftts-infinite-css-slideInLeftts-hover-css-slideInLeftts-viewport-css-slideInLeft
62Slide In Rightts-infinite-css-slideInRightts-hover-css-slideInRightts-viewport-css-slideInRight
Slide Exits
63Slide Out Upts-infinite-css-slideOutUpts-hover-css-slideOutUpts-viewport-css-slideOutUp
64Slide Out Downts-infinite-css-slideOutDownts-hover-css-slideOutDownts-viewport-css-slideOutDown
65Slide Out Leftts-infinite-css-slideOutLeftts-hover-css-slideOutLeftts-viewport-css-slideOutLeft
66Slide Out Rightts-infinite-css-slideOutRightts-hover-css-slideOutRightts-viewport-css-slideOutRight
Wobblers
67Wobble Standardts-infinite-css-wobblets-hover-css-wobblets-viewport-css-wobble
68Wobble Verticalts-infinite-css-wobbleVerticalts-hover-css-wobbleVerticalts-viewport-css-wobbleVertical
69Wobble Horizontalts-infinite-css-wobbleHorizontalts-hover-css-wobbleHorizontalts-viewport-css-wobbleHorizontal
70Wobble Topts-infinite-css-wobbleTopts-hover-css-wobbleTopts-viewport-css-wobbleTop
71Wobble Bottomts-infinite-css-wobbleBottomts-hover-css-wobbleBottomts-viewport-css-wobbleBottom