Material Community Animated: The project is based on sass for simplified screen transition animations.
The project consists of designing a simple structure and animations of components and screen transitions, using a declarative form of css class.
Ex.:
<div class="mc-animated anim-fade-in">
Hello World!</div>
Fade-in effect: mc-animated anim-fade-in Fade-out effect: mc-animated anim-fade reverse
To start we always use the mc-animated class followed by some animation class as an example anim-fade.
For practically every class of animation you can use the use of the reverse class so that the animation is reversed.
Ex.:
mc-animated anim-fade-in reverse
By default most of the animations use the duration of 0.225s, but we can accelerate or decelerate the animations, using the classes slow and fast, respectively. In addition, you can specify time duration with class test to debug view animation.
slow - 0.325 milleseconds fast - 0.125 milleseconds test - 4 seconds. Used for debug detail how the animation is executed
Ex.:
mc-animated anim-fade-in slow mc-animated anim-fade-in reverse fast
delay-slow - 0.325 milleseconds delay-fast - 0.125 milleseconds delay-test - 4 seconds. Used for debug detail how the animation is executed
Ex.:
mc-animated anim-fade-in delay-slow mc-animated anim-fade-in delay-fast
Pack Fade basic
anim-fade-in anim-fade-out
Pack Shake
anim-shake
Pack Slide Fade 3D
anim-slide-fade-3d-left anim-slide-fade-3d-right anim-slide-fade-3d-top anim-slide-fade-3d-bottom
Pack Slide Fade
anim-slide-fade-left anim-slide-fade-right anim-slide-fade-top anim-slide-fade-bottom
Pack Slide Short
anim-slide-short-left anim-slide-short-right anim-slide-short-top anim-slide-short-bottom
Pack Slide
anim-slide-left anim-slide-right anim-slide-top anim-slide-bottom
Pack Zoom Elastic
anim-zoom-elastic-in anim-zoom-elastic-Out
Pack Zoom Fade
anim-zoom-fade-in anim-zoom-fade-out
Pack Zoom basic
anim-zoom-in anim-zoom-out