Animation

A basic collection of smooth animations to use within your page.


Usage

To apply this component, add any .animation-* class to an element and it will fade in with a nice animation. These classes are commonly set by using JavaScript to apply the animation to specific behaviors.

Usage

  • Sub Objects

    Class Description
    .animation-hover Will execute the animation on hover.

    Modifiers

    Class Description
    .animation-fade The element fades in.
    .animation-scale-up The element scales up.
    .animation-scale-down The element scales down.
    .animation-slide-top The element slides in from the top.
    .animation-slide-bottom The element slides in from the bottom.
    .animation-slide-left The element slides in from the left.
    .animation-slide-right The element slides in from the right.
    .animation-shake The element shakes.
    .animation-scale The element scales down without fading in.
    .animation-reverse This class will reverse the animation direction.
    .animation-15 Extends the animation time to 15 seconds.
    .animation-delay-100 Delays the animation by 100 milliseconds.
    .animation-delay-200 Delays the animation by 200 milliseconds.
    .animation-delay-300 Delays the animation by 300 milliseconds.
    .animation-delay-400 Delays the animation by 400 milliseconds.
    .animation-delay-500 Delays the animation by 500 milliseconds.
    .animation-top-left Alters the transform-origin property to the top-left of the element.
    .animation-top-center Alters the transform-origin property to the top-center of the element.
    .animation-top-right Alters the transform-origin property to the top-right of the element.
    .animation-middle-left Alters the transform-origin property to the middle-left of the element.
    .animation-middle-center Alters the transform-origin property to the middle-center of the element.
    .animation-middle-right Alters the transform-origin property to the middle-right of the element.
    .animation-bottom-left Alters the transform-origin property to the bottom-left of the element.
    .animation-bottom-center Alters the transform-origin property to the bottom-center of the element.
    .animation-bottom-right Alters the transform-origin property to the bottom-right of the element.
  • Animation Fade
    Animation Scale Up
    Animation Scale Down
    Animation Slide Top
    Animation Slide Bottom
    Animation Slide Left
    Animation Slide Right
    Animation Shake
    Animation Scale
  • <div class="animation-fade">...</div>
    <div class="animation-scale-up">...</div>
    <div class="animation-scale-down">...</div>
    <div class="animation-slide-top">...</div>
    <div class="animation-slide-bottom">...</div>
    <div class="animation-slide-left">...</div>
    <div class="animation-slide-right">...</div>
    <div class="animation-shake">...</div>
    <div class="animation-scale">...</div>
    

Subobjects

Animation Hover

To trigger an animation on hover, add the .animation-hover class to the animated element itself or to a container.

Usage

  • Animation Fade
    Animation Scale Up
    Animation Scale Down
  • <div class="animation-hover animation-fade">...</div>
    <div class="animation-hover animation-scale-up">...</div>
    <div class="animation-hover animation-scale-down">...</div>
    

Modifiers

Reverse

By default, all aimations are incoming. To reverse any animation, add the .animation-reverse class.

Usage

  • Animation Fade
    Animation Scale Up
    Animation Scale Down
  • <div class="animation-reverse animation-fade">...</div>
    <div class="animation-reverse animation-scale-up">...</div>
    <div class="animation-reverse animation-scale-down">...</div>
    

Origin Modifiers

By default, scaling animations originate from the center. To modify this behavior, add one of these classes.

Usage

  • Animation Top Left
    Animation Top Center
    Animation Top Right
    Animation Middle Left
    Animation Middle Center
    Animation Middle Right
    Animation Bottom Left
    Animation Bottom Center
    Animation Bottom Right
  • <div class="animation-top-left animation-scale-up">...</div>
    <div class="animation-top-center animation-scale-up">...</div>
    <div class="animation-top-right animation-scale-up">...</div>
    
    <div class="animation-middle-left animation-scale-up">...</div>
    <div class="animation-middle-center animation-scale-up">...</div>
    <div class="animation-middle-right animation-scale-up">...</div>
    
    <div class="animation-bottom-left animation-scale-up">...</div>
    <div class="animation-bottom-center animation-scale-up">...</div>
    <div class="animation-bottom-right animation-scale-up">...</div>
    
    

Duration/Delay Modifiers

To alter the duration and/or delay of animation property, apply one of the following classes

Usage

  • Animation 15
    Animation Delay 100
    Animation Delay 200
    Animation Delay 300
    Animation Delay 400
    Animation Delay 500
  • <div class="animation-15 animation-scale-up">...</div>
    
    <div class="animation-delay-100 animation-scale-up">...</div>
    <div class="animation-delay-200 animation-scale-up">...</div>
    <div class="animation-delay-300 animation-scale-up">...</div>
    <div class="animation-delay-400 animation-scale-up">...</div>
    <div class="animation-delay-500 animation-scale-up">...</div>