MCA - Material Community Animated

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

Let's go

To start we always use the mc-animated class followed by some animation class as an example anim-fade.

Output effects

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

Basic animation speeds

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

Basic start delay of animations

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

Basic list animations

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