

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 Name | Default (Class Name) | Hover (Class Name) | Viewport (Class Name) | Animation Effect |
---|---|---|---|---|---|
Attention Seekers | |||||
1 | Flash | ts-infinite-css-flash | ts-hover-css-flash | ts-viewport-css-flash | |
2 | Hinge | ts-infinite-css-hinge | ts-hover-css-hinge | ts-viewport-css-hinge | |
3 | Roll In | ts-infinite-css-rollIn | ts-hover-css-rollIn | ts-viewport-css-rollIn | |
4 | Roll Out | ts-infinite-css-rollOut | ts-hover-css-rollOut | ts-viewport-css-rollOut | |
5 | Rotate Full | ts-infinite-css-rotateFull | ts-hover-css-rotateFull | ts-viewport-css-rotateFull | |
6 | Rubberband | ts-infinite-css-rubberBand | ts-hover-css-rubberBand | ts-viewport-css-rubberBand | |
7 | Shake | ts-infinite-css-shake | ts-hover-css-shake | ts-viewport-css-shake | |
8 | Spin | ts-infinite-css-spin | ts-hover-css-spin | ts-viewport-css-spin | |
9 | Swing | ts-infinite-css-swing | ts-hover-css-swing | ts-viewport-css-swing | |
10 | Tada | ts-infinite-css-tada | ts-hover-css-tada | ts-viewport-css-tada | |
11 | Jello | ts-infinite-css-jello | ts-hover-css-jello | ts-viewport-css-jello | |
Bounce Entries | |||||
12 | Bounce In | ts-infinite-css-bounceIn | ts-hover-css-bounceIn | ts-viewport-css-bounceIn | |
13 | Bounce In Down | ts-infinite-css-bounceInDown | ts-hover-css-bounceInDown | ts-viewport-css-bounceInDown | |
14 | Bounce In Left | ts-infinite-css-bounceInLeft | ts-hover-css-bounceInLeft | ts-viewport-css-bounceInLeft | |
15 | Bounce In Right | ts-infinite-css-bounceInRight | ts-hover-css-bounceInRight | ts-viewport-css-bounceInRight | |
16 | Bounce In Up | ts-infinite-css-bounceInUp | ts-hover-css-bounceInUp | ts-viewport-css-bounceInUp | |
Bounce Exits | |||||
17 | Bounce Out | ts-infinite-css-bounceOut | ts-hover-css-bounceOut | ts-viewport-css-bounceOut | |
18 | Bounce Out Down | ts-infinite-css-bounceOutDown | ts-hover-css-bounceOutDown | ts-viewport-css-bounceOutDown | |
19 | Bounce Out Left | ts-infinite-css-bounceOutLeft | ts-hover-css-bounceOutLeft | ts-viewport-css-bounceOutLeft | |
20 | Bounce Out Right | ts-infinite-css-bounceOutRight | ts-hover-css-bounceOutRight | ts-viewport-css-bounceOutRight | |
21 | Bounce Out Up | ts-infinite-css-bounceOutUp | ts-hover-css-bounceOutUp | ts-viewport-css-bounceOutUp | |
Fade Entries | |||||
22 | Fade In | ts-infinite-css-fadeIn | ts-hover-css-fadeIn | ts-viewport-css-fadeIn | |
23 | Fade In Down | ts-infinite-css-fadeInDown | ts-hover-css-fadeInDown | ts-viewport-css-fadeInDown | |
24 | Fade In Down Big | ts-infinite-css-fadeInDownBig | ts-hover-css-fadeInDownBig | ts-viewport-css-fadeInDownBig | |
25 | Fade In Left | ts-infinite-css-fadeInLeft | ts-hover-css-fadeInLeft | ts-viewport-css-fadeInLeft | |
26 | Fade In Left Big | ts-infinite-css-fadeInLeftBig | ts-hover-css-fadeInLeftBig | ts-viewport-css-fadeInLeftBig | |
27 | Fade In Right | ts-infinite-css-fadeInRight | ts-hover-css-fadeInRight | ts-viewport-css-fadeInRight | |
28 | Fade In Right Big | ts-infinite-css-fadeInRightBig | ts-hover-css-fadeInRightBig | ts-viewport-css-fadeInRightBig | |
29 | Fade In Up | ts-infinite-css-fadeInUp | ts-hover-css-fadeInUp | ts-viewport-css-fadeInUp | |
30 | Fade In Up Big | ts-infinite-css-fadeInUpBig | ts-hover-css-fadeInUpBig | ts-viewport-css-fadeInUpBig | |
Fade Exits | |||||
31 | Fade Out | ts-infinite-css-fadeOut | ts-hover-css-fadeOut | ts-viewport-css-fadeOut | |
32 | Fade Out Down | ts-infinite-css-fadeOutDown | ts-hover-css-fadeOutDown | ts-viewport-css-fadeOutDown | |
33 | Fade Out Down Big | ts-infinite-css-fadeOutDownBig | ts-hover-css-fadeOutDownBig | ts-viewport-css-fadeOutDownBig | |
34 | Fade Out Left | ts-infinite-css-fadeOutLeft | ts-hover-css-fadeOutLeft | ts-viewport-css-fadeOutLeft | |
35 | Fade Out Left Big | ts-infinite-css-fadeOutLeftBig | ts-hover-css-fadeOutLeftBig | ts-viewport-css-fadeOutLeftBig | |
36 | Fade Out Right | ts-infinite-css-fadeOutRight | ts-hover-css-fadeOutRight | ts-viewport-css-fadeOutRight | |
37 | Fade Out Right Big | ts-infinite-css-fadeOutRightBig | ts-hover-css-fadeOutRightBig | ts-viewport-css-fadeOutRightBig | |
38 | Fade Out Up | ts-infinite-css-fadeOutUp | ts-hover-css-fadeOutUp | ts-viewport-css-fadeOutUp | |
39 | Fade Out Up Big | ts-infinite-css-fadeOutUpBig | ts-hover-css-fadeOutUpBig | ts-viewport-css-fadeOutUpBig | |
Flippers | |||||
40 | Flip In X | ts-infinite-css-flipInX | ts-hover-css-flipInX | ts-viewport-css-flipInX | |
41 | Flip In Y | ts-infinite-css-flipInY | ts-hover-css-flipInY | ts-viewport-css-flipInY | |
42 | Flip Out X | ts-infinite-css-flipOutX | ts-hover-css-flipOutX | ts-viewport-css-flipOutX | |
43 | Flip Out Y | ts-infinite-css-flipOutY | ts-hover-css-flipOutY | ts-viewport-css-flipOutY | |
Lightspeed | |||||
44 | Light Speed In | ts-infinite-css-lightSpeedIn | ts-hover-css-lightSpeedIn | ts-viewport-css-lightSpeedIn | |
45 | Light Speed Out | ts-infinite-css-lightSpeedOut | ts-hover-css-lightSpeedOut | ts-viewport-css-lightSpeedOut | |
Pulsars | |||||
46 | Pulse Normal | ts-infinite-css-pulse | ts-hover-css-pulse | ts-viewport-css-pulse | |
47 | Pulse Grow | ts-infinite-css-pulseGrow | ts-hover-css-pulseGrow | ts-viewport-css-pulseGrow | |
48 | Pulse Shrink | ts-infinite-css-pulseShrink | ts-hover-css-pulseShrink | ts-viewport-css-pulseShrink | |
Rotate Entries | |||||
49 | Rotate In | ts-infinite-css-rotateIn | ts-hover-css-rotateIn | ts-viewport-css-rotateIn | |
50 | Rotate In Down Left | ts-infinite-css-rotateInDownLeft | ts-hover-css-rotateInDownLeft | ts-viewport-css-rotateInDownLeft | |
51 | Rotate In Down Right | ts-infinite-css-rotateInDownRight | ts-hover-css-rotateInDownRight | ts-viewport-css-rotateInDownRight | |
52 | Rotate In Up Left | ts-infinite-css-rotateInUpLeft | ts-hover-css-rotateInUpLeft | ts-viewport-css-rotateInUpLeft | |
53 | Rotate In Up Right | ts-infinite-css-rotateInUpRight | ts-hover-css-rotateInUpRight | ts-viewport-css-rotateInUpRight | |
Rotate Exits | |||||
54 | Rotate Out | ts-infinite-css-rotateOut | ts-hover-css-rotateOut | ts-viewport-css-rotateOut | |
55 | Rotate Out Down Left | ts-infinite-css-rotateOutDownLeft | ts-hover-css-rotateOutDownLeft | ts-viewport-css-rotateOutDownLeft | |
56 | Rotate Out Down Right | ts-infinite-css-rotateOutDownRight | ts-hover-css-rotateOutDownRight | ts-viewport-css-rotateOutDownRight | |
57 | Rotate Out Up Left | ts-infinite-css-rotateOutUpLeft | ts-hover-css-rotateOutUpLeft | ts-viewport-css-rotateOutUpLeft | |
58 | Rotate Out Up Right | ts-infinite-css-rotateOutUpRight | ts-hover-css-rotateOutUpRight | ts-viewport-css-rotateOutUpRight | |
Slide Entries | |||||
59 | Slide In Up | ts-infinite-css-slideInUp | ts-hover-css-slideInUp | ts-viewport-css-slideInUp | |
60 | Slide In Down | ts-infinite-css-slideInDown | ts-hover-css-slideInDown | ts-viewport-css-slideInDown | |
61 | Slide In Left | ts-infinite-css-slideInLeft | ts-hover-css-slideInLeft | ts-viewport-css-slideInLeft | |
62 | Slide In Right | ts-infinite-css-slideInRight | ts-hover-css-slideInRight | ts-viewport-css-slideInRight | |
Slide Exits | |||||
63 | Slide Out Up | ts-infinite-css-slideOutUp | ts-hover-css-slideOutUp | ts-viewport-css-slideOutUp | |
64 | Slide Out Down | ts-infinite-css-slideOutDown | ts-hover-css-slideOutDown | ts-viewport-css-slideOutDown | |
65 | Slide Out Left | ts-infinite-css-slideOutLeft | ts-hover-css-slideOutLeft | ts-viewport-css-slideOutLeft | |
66 | Slide Out Right | ts-infinite-css-slideOutRight | ts-hover-css-slideOutRight | ts-viewport-css-slideOutRight | |
Wobblers | |||||
67 | Wobble Standard | ts-infinite-css-wobble | ts-hover-css-wobble | ts-viewport-css-wobble | |
68 | Wobble Vertical | ts-infinite-css-wobbleVertical | ts-hover-css-wobbleVertical | ts-viewport-css-wobbleVertical | |
69 | Wobble Horizontal | ts-infinite-css-wobbleHorizontal | ts-hover-css-wobbleHorizontal | ts-viewport-css-wobbleHorizontal | |
70 | Wobble Top | ts-infinite-css-wobbleTop | ts-hover-css-wobbleTop | ts-viewport-css-wobbleTop | |
71 | Wobble Bottom | ts-infinite-css-wobbleBottom | ts-hover-css-wobbleBottom | ts-viewport-css-wobbleBottom |