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 | |