Animations

Custom animation utilities to add motion to your transitioning content
Fade In Transition
Action Another action Something else here 
//- Fade In Animation
.dropdown
    button#dropdownFadeIn.btn.btn-primary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
        | Click Me!
    .dropdown-menu.animated--fade-in(aria-labelledby='dropdownFadeIn')
        a.dropdown-item(href='#!') Action
        a.dropdown-item(href='#!') Another action
        a.dropdown-item(href='#!') Something else here
The fade in utility can be used by adding .animated--fade-in to an element. In the above example, it is being used along with a Bootstrap dropdown menu.
Fade In Up Transition
Action Another action Something else here 
//- Fade In Up Animation
.dropdown
    button#dropdownFadeIn.btn.btn-secondary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true', aria-expanded='false')
        | Click Me!
    .dropdown-menu.animated--fade-in-up(aria-labelledby='dropdownFadeIn')
        a.dropdown-item(href='#!') Action
        a.dropdown-item(href='#!') Another action
        a.dropdown-item(href='#!') Something else here
The fade in up utility can be used by adding .animated--fade-in-up to an element. In the above example, it is being used along with a Bootstrap dropdown menu.