Animations
Custom animation utilities to add motion to your transitioning content
Fade In Transition
//- Fade In Animation
.dropdown
button#dropdownFadeIn.btn.btn-primary.dropdown-toggle(type='button', data-bs-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
//- Fade In Up Animation
.dropdown
button#dropdownFadeIn.btn.btn-secondary.dropdown-toggle(type='button', data-bs-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.