.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);}
}