Animations
FlatifyCSS comes with a couple of built-in CSS animations.
Generally, components use these animations to work as expected, however, you can use them as well!
Before starting on, it is necessary to learn about CSS animations, read more here.
Animations
All available animations are listed below by their names, you can set them to the element that you wish like this:
animation: my-animation-name ease 1s infinite;
Fade
flatify-fade-in
flatify-fade-in-out
flatify-backdrop-fade-in (Fade in - the final opacity is --flatify__backdrop-opacity)
flatify-fade-out
Scale
flatify-grow
flatify-grow-x
flatify-grow-y
flatify-blow-in
flatify-blow-out
flatify-heart
flatify-pulse
Rotation
flatify-spin
Movement
flatify-slide-up-in
flatify-slide-up-in-min
flatify-slide-up-out
flatify-slide-down-in
flatify-slide-down-out
flatify-slide-down-out-min
flatify-slide-left-in
flatify-slide-left-out
flatify-slide-left-in-min
flatify-slide-left-out-min
flatify-slide-right-in
flatify-slide-right-out
flatify-slide-right-in-min
flatify-slide-right-out-min
Filter
flatify-hue
flatify-hue-min
Misc
These animations are just special to thier usecases:
flatify-processing The animation for progress bar processing state.
flatify-alert-will-be-removed
flatify-dropdown-show
flatify-dropdown-hide
flatify-eye-blink
flatify-loading-dot-first
flatify-loading-dot-second
flatify-loading-dot-third
Helper classes
It is possible to change the animation state with helper classes, for example, play, pause, or stop.
These are helper classes that you can use:
.no-transition Remove transition for an element.
.no-animation Remove aniamtion for an element.
.play-animation Play current animation
.pause-animation Pause current animation
.stop-animation Stop the animation
Animation classes
Some predefined classes help you set animations directly:
.anim-hue (infinite)
.anim-hue-min (infinite)
.anim-spin (infinite)
.anim-pulse (infinite)
.anim-heart (infinite)
.anim-required Heart animation but repeats just two times.
.anim-fade-in (one time)
.anim-fade-out (one time)