Overview

Using the following classes, one may apply animations to an element.

Exit Animations

At this time, there is no way to use CSS to show animations when leaving a page. That approach would require JavaScript intervention in order delay opening a new page while showing any exit animation.

This feature may be developed in the future.

Hover

Scale

This animation will transform an item to grow larger upon hover. This should only be applied to elements that are linked. Apply .anim-hover-scale-up to the wrapping div of the desired element.

This box grows upon hover.

 
<a href="#">
  <div class="well well-sm no-shadow bg-black text-center anim-hover-scale-up">
    <h2 class="margin-top-none">This box grows upon hover.</h2>
  </div>
</a>

Fade-In from Bottom

Distances

The animation may have its start position lowered by using one of the following classes.

Class Position
.anim-fade-in-bottom-10 10 pixels
.anim-fade-in-bottom-20 20 pixels
.anim-fade-in-bottom-30 30 pixels
.anim-fade-in-bottom-40 40 pixels
.anim-fade-in-bottom-50 50 pixels
.anim-fade-in-bottom-60 60 pixels
.anim-fade-in-bottom-70 70 pixels
.anim-fade-in-bottom-80 80 pixels
.anim-fade-in-bottom-90 90 pixels
.anim-fade-in-bottom-100 100 pixels

Distance Examples

Each example is using .anim-duration-2.

fade-in-bottom-10
fade-in-bottom-20
fade-in-bottom-30
fade-in-bottom-40
fade-in-bottom-50
fade-in-bottom-60
fade-in-bottom-70
fade-in-bottom-80

Duration Examples

Each example is using .anim-fade-in-bottom-50.

duration-0-25
duration-0-5
duration-0-75
duration-1
duration-1-25
duration-1-5
duration-1-75
duration-2
duration-2-25
duration-2-5

Delay Examples

Each example is using .anim-duration-2 and .anim-fade-in-bottom-50.

Also, note that the beginning state of each example below is hidden, and its ending state is shown. In order to achieve this, the following classes must also be added: .anim-start-hide and .anim-keep-final-state.

delay-0-25
delay-0-5
delay-0-75
delay-1
delay-1-25
delay-1-5
delay-1-75
delay-2
delay-2-25
delay-2-5

Settings

Animation settings allow the custom configuration of timing for durations and delays. These classes must be added alongside the animation class. The duration class is required for the animation to display.

Durations

Class Timing
.anim-duration-0-25 0.25 seconds
.anim-duration-0-5 0.5 seconds
.anim-duration-0-75 0.75 seconds
.anim-duration-1 1 second
.anim-duration-1-25 1.25 seconds
.anim-duration-1-5 1.5 seconds
.anim-duration-1-75 1.75 seconds
.anim-duration-2 2 seconds
.anim-duration-2-25 2.25 seconds
.anim-duration-2-5 2.5 seconds
.anim-duration-2-75 2.75 seconds
.anim-duration-3 3 seconds
.anim-duration-3-25 3.25 seconds
.anim-duration-3-5 3.5 seconds
.anim-duration-3-75 3.75 seconds
.anim-duration-4 4 seconds
.anim-duration-4-25 4.25 seconds
.anim-duration-4-5 4.5 seconds
.anim-duration-4-75 4.75 seconds
.anim-duration-5 5 seconds
.anim-duration-5-25 5.25 seconds
.anim-duration-5-5 5.5 seconds
.anim-duration-5-75 5.75 seconds
.anim-duration-6 6 seconds
.anim-duration-6-25 6.25 seconds
.anim-duration-6-5 6.5 seconds
.anim-duration-6-75 6.75 seconds
.anim-duration-7 7 seconds
.anim-duration-7-25 7.25 seconds
.anim-duration-7-5 7.5 seconds
.anim-duration-7-75 7.75 seconds
.anim-duration-8 8 seconds
.anim-duration-8-25 8.25 seconds
.anim-duration-8-5 8.5 seconds
.anim-duration-8-75 8.75 seconds
.anim-duration-9 9 seconds
.anim-duration-9-25 9.25 seconds
.anim-duration-9-5 9.5 seconds
.anim-duration-9-75 9.75 seconds
.anim-duration-10 10 seconds
.anim-duration-10-25 10.25 seconds
.anim-duration-10-5 10.5 seconds
.anim-duration-10-75 10.75 seconds

Delays

Animations may have their animations delayed by adding one of the following classes to the element being animated.

Using Delays

When using the .anim-delay-x class, depending on the intended usage, the element may need to be hidden at the beginning of the animation. Use the class .anim-start-hide to hide the element initially.

Also, when hiding an element initially and wanting to keep the element visually present at the end of the animation, use the class .anim-keep-final-state. By default, the element will return to its starting state, which would be hidden, if this class is not applied.

Class Timing
.anim-delay-0-25 0.25 seconds
.anim-delay-0-5 0.5 seconds
.anim-delay-0-75 0.75 seconds
.anim-delay-1 1 second
.anim-delay-1-25 1.25 seconds
.anim-delay-1-5 1.5 seconds
.anim-delay-1-75 1.75 seconds
.anim-delay-2 2 seconds
.anim-delay-2-25 2.25 seconds
.anim-delay-2-5 2.5 seconds
.anim-delay-2-75 2.75 seconds
.anim-delay-3 3 seconds
.anim-delay-3-25 3.25 seconds
.anim-delay-3-5 3.5 seconds
.anim-delay-3-75 3.75 seconds
.anim-delay-4 4 seconds
.anim-delay-4-25 4.25 seconds
.anim-delay-4-5 4.5 seconds
.anim-delay-4-75 4.75 seconds
.anim-delay-5 5 seconds
.anim-delay-5-25 5.25 seconds
.anim-delay-5-5 5.5 seconds
.anim-delay-5-75 5.75 seconds
.anim-delay-6 6 seconds
.anim-delay-6-25 6.25 seconds
.anim-delay-6-5 6.5 seconds
.anim-delay-6-75 6.75 seconds
.anim-delay-7 7 seconds
.anim-delay-7-25 7.25 seconds
.anim-delay-7-5 7.5 seconds
.anim-delay-7-75 7.75 seconds
.anim-delay-8 8 seconds
.anim-delay-8-25 8.25 seconds
.anim-delay-8-5 8.5 seconds
.anim-delay-8-75 8.75 seconds
.anim-delay-9 9 seconds
.anim-delay-9-25 9.25 seconds
.anim-delay-9-5 9.5 seconds
.anim-delay-9-75 9.75 seconds
.anim-delay-10 10 seconds
.anim-delay-10-25 10.25 seconds
.anim-delay-10-5 10.5 seconds
.anim-delay-10-75 10.75 seconds