.hidden{opacity:0}
.rotate{opacity:1;-webkit-animation:rotateLeft 1s ease-in-out;-moz-animation:rotateLeft 1s ease-in-out;-o-animation:rotateLeft 1s ease-in-out;animation:rotateLeft 1s ease-in-out}
@-webkit-keyframes rotateLeft{
from{opacity:0;-webkit-transform:rotate(180deg)}
to{opacity:1;-webkit-transform:rotate(0)}
}
@-moz-keyframes rotateLeft{
from{opacity:0;-moz-transform:rotate(180deg)}
to{opacity:1;-moz-transform:rotate(0)}
}
@-o-keyframes rotateLeft{
from{opacity:0;-o-transform:rotate(180deg)}
to{opacity:1;-o-transform:rotate(0)}
}
@keyframes rotateLeft{
from{opacity:0;transform:rotate(180deg)}
to{opacity:1;transform:rotate(0)}
}
.fromTop{opacity:1;-webkit-animation:fromTop 1s ease-in-out;-moz-animation:fromTop 1s ease-in-out;-o-animation:fromTop 1s ease-in-out;animation:fromTop 1s ease-in-out}
@-webkit-keyframes fromTop{
from{opacity:0;-webkit-transform:translateY(-50px)}
to{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fromTop{
from{opacity:0;-moz-transform:translateY(-50px)}
to{opacity:1;-moz-transform:translateY(0)}
}
@-o-keyframes fromTop{
from{opacity:0;-o-transform:translateY(-50px)}
to{opacity:1;-o-transform:translateY(0)}
}
@keyframes fromTop{
from{opacity:0;transform:translateY(-50px)}
to{opacity:1;transform:translateY(0)}
}
.fromBottom{opacity:1;-webkit-animation:fromBottom 1s ease-in-out;-moz-animation:fromBottom 1s ease-in-out;-o-animation:fromBottom 1s ease-in-out;animation:fromBottom 1s ease-in-out}
@-webkit-keyframes fromBottom{
from{opacity:0;-webkit-transform:translateY(50px)}
to{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fromBottom{
from{opacity:0;-moz-transform:translateY(50px)}
to{opacity:1;-moz-transform:translateY(0)}
}
@-o-keyframes fromBottom{
from{opacity:0;-o-transform:translateY(50px)}
to{opacity:1;-o-transform:translateY(0)}
}
@keyframes fromBottom{
from{opacity:0;transform:translateY(50px)}
to{opacity:1;transform:translateY(0)}
}
.fromLeft{opacity:1;-webkit-animation:fromLeft 1s ease-in-out;-moz-animation:fromLeft 1s ease-in-out;-o-animation:fromLeft 1s ease-in-out;animation:fromLeft 1s ease-in-out}
@-webkit-keyframes fromLeft{
from{opacity:0;-webkit-transform:translateX(-50px)}
to{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fromLeft{
from{opacity:0;-moz-transform:translateX(-50px)}
to{opacity:1;-moz-transform:translateY(0)}
}
@-o-keyframes fromLeft{
from{opacity:0;-o-transform:translateX(-50px)}
to{opacity:1;-o-transform:translateY(0)}
}
@keyframes fromLeft{
from{opacity:0;transform:translateX(-50px)}
to{opacity:1;transform:translateY(0)}
}
.fromRight{opacity:1;-webkit-animation:fromRight 1s ease-in-out;-moz-animation:fromRight 1s ease-in-out;-o-animation:fromRight 1s ease-in-out;animation:fromRight 1s ease-in-out}
@-webkit-keyframes fromRight{
from{opacity:0;-webkit-transform:translateX(50px)}
to{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fromRight{
from{opacity:0;-moz-transform:translateX(50px)}
to{opacity:1;-moz-transform:translateY(0)}
}
@-o-keyframes fromRight{
from{opacity:0;-o-transform:translateX(50px)}
to{opacity:1;-o-transform:translateY(0)}
}
@keyframes fromRight{
from{opacity:0;transform:translateX(50px)}
to{opacity:1;transform:translateY(0)}
}
.appear{opacity:1;-webkit-animation:appear 1s ease-in-out;-moz-animation:appear 1s ease-in-out;-o-animation:appear 1s ease-in-out;animation:appear 1s ease-in-out}
@-webkit-keyframes appear{
from{opacity:0}
to{opacity:1}
}
@-moz-keyframes appear{
from{opacity:0}
to{opacity:1}
}
@-o-keyframes appear{
from{opacity:0}
to{opacity:1}
}
@keyframes appear{
from{opacity:0}
to{opacity:1}
}
.delayed{-webkit-animation-fill-mode:backwards;-moz-animation-fill-mode:backwards;-o-animation-fill-mode:backwards;animation-fill-mode:backwards}