Animations

There are a few common animations that you can apply to certain elements to emphasize their appearance in the page. You can use them with the Reveal feature, the Tabs drag-and-drop component, or other content that appears in the page or on user interaction, although it may not work with certian type of elements, or at least, may not be such a good idea to use them with some type of content, like sliders, or masonry listing items.

Apply animations by adding one of the classes below, to your element, module or group:

Act2 Template Builder Module Edit CSS

Act2 Template Builder Fade Right CSS Class

CSS Class Hover the class name a few seconds to see a sample
fade-in
fade-up
fade-down
fade-right
fade-left
expand-right
expand-left
bubble-up
bubble-down
bubble-right
bubble-left
zoom-in
zoom-out
(for hiding elements)

Delay

Along with the animation class you can also use one of these classes to add a delay to your animation. The values are expressed in milliseconds (1 second = 1000 milliseconds):

Act2 Template Builder Reveal Fade Right Animation Delay 1000 CSS Class

animation-delay-100
animation-delay-200
animation-delay-300
animation-delay-400
animation-delay-500
animation-delay-600
animation-delay-700
animation-delay-800
animation-delay-900
animation-delay-1000
animation-delay-1100
animation-delay-1200
animation-delay-1300
animation-delay-1400
animation-delay-1500
animation-delay-1600
animation-delay-1700
animation-delay-1800
animation-delay-1900
animation-delay-2000
animation-delay-2500
animation-delay-3000
animation-delay-3500
animation-delay-4000
animation-delay-4500
animation-delay-5000

Duration

Along with the animation class you can also use one of these classes to specify the duration of your animation. The values are expressed in milliseconds (1 second = 1000 milliseconds):

animation-duration-100
animation-duration-200
animation-duration-300
animation-duration-400
animation-duration-500
animation-duration-600
animation-duration-700
animation-duration-800
animation-duration-900
animation-duration-1000
animation-duration-1100
animation-duration-1200
animation-duration-1300
animation-duration-1400
animation-duration-1500
animation-duration-1600
animation-duration-1700
animation-duration-1800
animation-duration-1900
animation-duration-2000
animation-duration-2500
animation-duration-3000
animation-duration-3500
animation-duration-4000
animation-duration-4500
animation-duration-5000

Please also see the Reveal feature.

Using Act2.1 with the new Design Tools? Read this documentation.