.zoom-in{
-webkit-animation: zoomIn 400ms ease both;
-moz-animation: zoomIn 400ms ease both;
-o-animation: zoomIn 400ms ease both;
animation: zoomIn 400ms ease both;
}
@-webkit-keyframes zoomIn {
0% { -webkit-transform: scale(1.5); }
100% { -webkit-transform: scale(1); }
}
@-moz-keyframes zoomIn {
0% { -moz-transform: scale(1.5); }
100% { -moz-transform: scale(1); }
}
@-o-keyframes zoomIn {
0% { opacity: 0; -o-transform: scale(1.5); }
100% { opacity: 1; -o-transform: scale(1); }
}
@keyframes zoomIn {
0% { transform: scale(1.5); }
100% { transform: scale(1); }
}
.zoom-out{
-webkit-animation: zoomOut 400ms ease both;
-moz-animation: zoomOut 400ms ease both;
-o-animation: zoomOut 400ms ease both;
animation: zoomOut 400ms ease both;
}
@-webkit-keyframes zoomOut {
0% { -webkit-transform: scale(.6); }
100% { -webkit-transform: scale(1); }
}
@-moz-keyframes zoomOut {
0% { -moz-transform: scale(.6); }
100% { -moz-transform: scale(1); }
}
@-o-keyframes zoomOut {
0% { -o-transform: scale(.6); }
100% { -o-transform: scale(1); }
}
@keyframes zoomOut {
0% { transform: scale(.6); }
100% { transform: scale(1); }
}
.drop-up{
-webkit-animation: drop-up 400ms ease both;
-moz-animation: drop-up 400ms ease both;
-o-animation: drop-up 400ms ease both;
animation: drop-up 400ms ease both;
}
@-webkit-keyframes drop-up {
0% { -webkit-transform: translateY(100px); }
100% { -webkit-transform: translateY(0); }
}
@-moz-keyframes drop-up {
0% { -moz-transform: translateY(100px); }
100% { -moz-transform: translateY(0); }
}
@-o-keyframes drop-up {
0% { -o-transform: translateY(100px); }
100% { -o-transform: translateY(0); }
}
@keyframes drop-up {
0% { transform: translateY(100px); }
100% { transform: translateY(0); }
}
.drop-left{
-webkit-animation: drop-left 400ms ease both;
-moz-animation: drop-left 400ms ease both;
-o-animation: drop-left 400ms ease both;
animation: drop-left 400ms ease both;
}
@-webkit-keyframes drop-left {
0% { -webkit-transform: translateX(-100px); }
100% { -webkit-transform: translateX(0); }
}
@-moz-keyframes drop-left {
0% { -moz-transform: translateX(-100px); }
100% { -moz-transform: translateX(0); }
}
@-o-keyframes drop-left {
0% { -o-transform: translateX(-100px); }
100% { -o-transform: translateX(0); }
}
@keyframes drop-left {
0% { transform: translateX(-100px); }
100% { transform: translateX(0); }
}
.swing {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation: swing 400ms ease-out both;
-moz-animation: swing 400ms ease-out both;
-o-animation: swing 400ms ease-out both;
animation: swing 400ms ease-out both;
}
@-webkit-keyframes swing {
20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
20% { -webkit-transform: rotate(15deg); }	
40% { -webkit-transform: rotate(-10deg); }
60% { -webkit-transform: rotate(5deg); }	
80% { -webkit-transform: rotate(-5deg); }	
100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes swing {
20% { -moz-transform: rotate(15deg); }	
40% { -moz-transform: rotate(-10deg); }
60% { -moz-transform: rotate(5deg); }	
80% { -moz-transform: rotate(-5deg); }	
100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes swing {
20% { -o-transform: rotate(15deg); }	
40% { -o-transform: rotate(-10deg); }
60% { -o-transform: rotate(5deg); }	
80% { -o-transform: rotate(-5deg); }	
100% { -o-transform: rotate(0deg); }
}
@keyframes swing {
20% { transform: rotate(15deg); }	
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }	
80% { transform: rotate(-5deg); }	
100% { transform: rotate(0deg); }
}
.flip{
-webkit-animation: flip 700ms ease both;
-moz-animation: flip 700ms ease both;
-o-animation: flip 700ms ease both;
animation: flip 700ms ease both;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flip {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
-ms-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
-ms-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.roll-in{
-webkit-animation: roll-in 400ms ease both;
-moz-animation: roll-in 400ms ease both;
-o-animation: roll-in 400ms ease both;
animation: roll-in 400ms ease both;
}
@-webkit-keyframes roll-in {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-15deg);
transform: translateX(-100%) rotate(-15deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
}
@keyframes roll-in {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-15deg);
-ms-transform: translateX(-100%) rotate(-15deg);
transform: translateX(-100%) rotate(-15deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
}
.stretch{
-webkit-animation: stretch 500ms ease both;
-moz-animation: stretch 500ms ease both;
-o-animation: stretch 500ms ease both;
animation: stretch 500ms ease both;
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%; 		
}
@keyframes stretch{
0% { transform: scaleX(0.3); }
40% { transform: scaleX(1.02); }
60% { transform: scaleX(0.98); }
80% { transform: scaleX(1.01); }
100% { transform: scaleX(0.98); }				
80% { transform: scaleX(1.01); }
100% { transform: scaleX(1); }							
}
@-webkit-keyframes stretch{
0% { -webkit-transform: scaleX(0.3); }
40% { -webkit-transform: scaleX(1.02); }
60% { -webkit-transform: scaleX(0.98); }
80% { -webkit-transform: scaleX(1.01); }
100% { -webkit-transform: scaleX(0.98); }				
80% { -webkit-transform: scaleX(1.01); }
100% { -webkit-transform: scaleX(1); }		
}
@-o-keyframes stretch{
0% { -o-transform: scaleX(0.3); }
40% { -o-transform: scaleX(1.02); }
60% { -o-transform: scaleX(0.98); }
80% { -o-transform: scaleX(1.01); }
100% { -o-transform: scaleX(0.98); }				
80% { -o-transform: scaleX(1.01); }
100% { -o-transform: scaleX(1); }		
}