├── .gitignore ├── .npmignore ├── src ├── animations │ ├── sliding │ │ ├── all.less │ │ ├── slideUp.less │ │ ├── slideDown.less │ │ ├── slideLeft.less │ │ └── slideRight.less │ ├── zooming │ │ ├── all.less │ │ ├── zoom.less │ │ ├── zoomLeft.less │ │ ├── zoomRight.less │ │ ├── zoomUp.less │ │ └── zoomDown.less │ ├── bouncing │ │ ├── all.less │ │ ├── bounceLeft.less │ │ ├── bounceRight.less │ │ ├── bounceDown.less │ │ ├── bounceUp.less │ │ └── bounce.less │ ├── rotating │ │ ├── all.less │ │ ├── rotate.less │ │ ├── rotateUpLeft.less │ │ ├── rotateDownLeft.less │ │ ├── rotateUpRight.less │ │ └── rotateDownRight.less │ └── fading │ │ ├── fade.less │ │ ├── all.less │ │ ├── fadeUp.less │ │ ├── fadeDown.less │ │ ├── fadeLeft.less │ │ ├── fadeRight.less │ │ ├── fadeUpBig.less │ │ ├── fadeDownBig.less │ │ ├── fadeLeftBig.less │ │ └── fadeRightBig.less ├── vue-animate.less └── make-transitions.less ├── LICENSE ├── package.json ├── README.md └── dist ├── vue-animate.min.css └── vue-animate.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | *.log -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .* 2 | *.log 3 | *.swp 4 | *.yml 5 | bower.json 6 | coverage 7 | config 8 | dist/*.map 9 | lib 10 | test 11 | -------------------------------------------------------------------------------- /src/animations/sliding/all.less: -------------------------------------------------------------------------------- 1 | @import 'slideDown'; 2 | @import 'slideLeft'; 3 | @import 'slideRight'; 4 | @import 'slideUp'; 5 | 6 | @slides: Down, Left, Right, Up; 7 | .make-transitions(slide, @slides); 8 | -------------------------------------------------------------------------------- /src/animations/zooming/all.less: -------------------------------------------------------------------------------- 1 | @import 'zoom'; 2 | @import 'zoomDown'; 3 | @import 'zoomLeft'; 4 | @import 'zoomRight'; 5 | @import 'zoomUp'; 6 | 7 | @zooms: Down, Left, Right, Up; 8 | .make-transitions(zoom, @zooms); 9 | -------------------------------------------------------------------------------- /src/animations/bouncing/all.less: -------------------------------------------------------------------------------- 1 | @import 'bounce'; 2 | @import 'bounceDown'; 3 | @import 'bounceLeft'; 4 | @import 'bounceRight'; 5 | @import 'bounceUp'; 6 | 7 | @bounces: Down, Left, Right, Up; 8 | .make-transitions(bounce, @bounces); 9 | -------------------------------------------------------------------------------- /src/animations/rotating/all.less: -------------------------------------------------------------------------------- 1 | @import 'rotate'; 2 | @import 'rotateDownLeft'; 3 | @import 'rotateDownRight'; 4 | @import 'rotateUpLeft'; 5 | @import 'rotateUpRight'; 6 | 7 | @rotates: DownLeft, DownRight, UpLeft, UpRight; 8 | .make-transitions(rotate, @rotates); 9 | -------------------------------------------------------------------------------- /src/animations/fading/fade.less: -------------------------------------------------------------------------------- 1 | @keyframes fadeIn { 2 | from { 3 | opacity: 0; 4 | } 5 | 6 | to { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | @keyframes fadeOut { 12 | from { 13 | opacity: 1; 14 | } 15 | 16 | to { 17 | opacity: 0; 18 | } 19 | } -------------------------------------------------------------------------------- /src/animations/fading/all.less: -------------------------------------------------------------------------------- 1 | @import 'fade'; 2 | @import 'fadeDown'; 3 | @import 'fadeDownBig'; 4 | @import 'fadeLeft'; 5 | @import 'fadeLeftBig'; 6 | @import 'fadeRight'; 7 | @import 'fadeRightBig'; 8 | @import 'fadeUp'; 9 | @import 'fadeUpBig'; 10 | 11 | @fades: Down, DownBig, Left, LeftBig, Right, RightBig, Up, UpBig; 12 | 13 | .make-transitions(fade, @fades); 14 | -------------------------------------------------------------------------------- /src/animations/fading/fadeUp.less: -------------------------------------------------------------------------------- 1 | @keyframes fadeInUp { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(0, 100%, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | @keyframes fadeOutUp { 14 | from { 15 | opacity: 1; 16 | } 17 | 18 | to { 19 | opacity: 0; 20 | transform: translate3d(0, -100%, 0); 21 | } 22 | } -------------------------------------------------------------------------------- /src/animations/fading/fadeDown.less: -------------------------------------------------------------------------------- 1 | @keyframes fadeInDown { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(0, -100%, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | @keyframes fadeOutDown { 14 | from { 15 | opacity: 1; 16 | } 17 | 18 | to { 19 | opacity: 0; 20 | transform: translate3d(0, 100%, 0); 21 | } 22 | } -------------------------------------------------------------------------------- /src/animations/fading/fadeLeft.less: -------------------------------------------------------------------------------- 1 | @keyframes fadeInLeft { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(-100%, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | @keyframes fadeOutLeft { 14 | from { 15 | opacity: 1; 16 | } 17 | 18 | to { 19 | opacity: 0; 20 | transform: translate3d(-100%, 0, 0); 21 | } 22 | } -------------------------------------------------------------------------------- /src/animations/fading/fadeRight.less: -------------------------------------------------------------------------------- 1 | @keyframes fadeInRight { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(100%, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | @keyframes fadeOutRight { 14 | from { 15 | opacity: 1; 16 | } 17 | 18 | to { 19 | opacity: 0; 20 | transform: translate3d(100%, 0, 0); 21 | } 22 | } -------------------------------------------------------------------------------- /src/animations/fading/fadeUpBig.less: -------------------------------------------------------------------------------- 1 | @keyframes fadeInUpBig { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(0, 2000px, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | @keyframes fadeOutUp { 14 | from { 15 | opacity: 1; 16 | } 17 | 18 | to { 19 | opacity: 0; 20 | transform: translate3d(0, -100%, 0); 21 | } 22 | } -------------------------------------------------------------------------------- /src/animations/fading/fadeDownBig.less: -------------------------------------------------------------------------------- 1 | @keyframes fadeInDownBig { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(0, -2000px, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | @keyframes fadeOutDownBig { 14 | from { 15 | opacity: 1; 16 | } 17 | 18 | to { 19 | opacity: 0; 20 | transform: translate3d(0, 2000px, 0); 21 | } 22 | } -------------------------------------------------------------------------------- /src/animations/zooming/zoom.less: -------------------------------------------------------------------------------- 1 | @keyframes zoomIn { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(.3, .3, .3); 5 | } 6 | 7 | 50% { 8 | opacity: 1; 9 | } 10 | } 11 | 12 | @keyframes zoomOut { 13 | from { 14 | opacity: 1; 15 | } 16 | 17 | 50% { 18 | opacity: 0; 19 | transform: scale3d(.3, .3, .3); 20 | } 21 | 22 | to { 23 | opacity: 0; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/animations/fading/fadeLeftBig.less: -------------------------------------------------------------------------------- 1 | @keyframes fadeInLeftBig { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(-2000px, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | @keyframes fadeOutLeftBig { 14 | from { 15 | opacity: 1; 16 | } 17 | 18 | to { 19 | opacity: 0; 20 | transform: translate3d(-2000px, 0, 0); 21 | } 22 | } -------------------------------------------------------------------------------- /src/animations/fading/fadeRightBig.less: -------------------------------------------------------------------------------- 1 | @keyframes fadeInRightBig { 2 | from { 3 | opacity: 0; 4 | transform: translate3d(2000px, 0, 0); 5 | } 6 | 7 | to { 8 | opacity: 1; 9 | transform: none; 10 | } 11 | } 12 | 13 | @keyframes fadeOutRightBig { 14 | from { 15 | opacity: 1; 16 | } 17 | 18 | to { 19 | opacity: 0; 20 | transform: translate3d(2000px, 0, 0); 21 | } 22 | } -------------------------------------------------------------------------------- /src/animations/sliding/slideUp.less: -------------------------------------------------------------------------------- 1 | @keyframes slideInUp { 2 | from { 3 | transform: translate3d(0, 100%, 0); 4 | visibility: visible; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | @keyframes slideOutUp { 13 | from { 14 | transform: translate3d(0, 0, 0); 15 | } 16 | 17 | to { 18 | visibility: hidden; 19 | transform: translate3d(0, -100%, 0); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/animations/sliding/slideDown.less: -------------------------------------------------------------------------------- 1 | @keyframes slideInDown { 2 | from { 3 | transform: translate3d(0, -100%, 0); 4 | visibility: visible; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | @keyframes slideOutDown { 13 | from { 14 | transform: translate3d(0, 0, 0); 15 | } 16 | 17 | to { 18 | visibility: hidden; 19 | transform: translate3d(0, 100%, 0); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/animations/sliding/slideLeft.less: -------------------------------------------------------------------------------- 1 | @keyframes slideInLeft { 2 | from { 3 | transform: translate3d(-100%, 0, 0); 4 | visibility: visible; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | @keyframes slideOutLeft { 13 | from { 14 | transform: translate3d(0, 0, 0); 15 | } 16 | 17 | to { 18 | visibility: hidden; 19 | transform: translate3d(-100%, 0, 0); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/animations/sliding/slideRight.less: -------------------------------------------------------------------------------- 1 | @keyframes slideInRight { 2 | from { 3 | transform: translate3d(100%, 0, 0); 4 | visibility: visible; 5 | } 6 | 7 | to { 8 | transform: translate3d(0, 0, 0); 9 | } 10 | } 11 | 12 | @keyframes slideOutRight { 13 | from { 14 | transform: translate3d(0, 0, 0); 15 | } 16 | 17 | to { 18 | visibility: hidden; 19 | transform: translate3d(100%, 0, 0); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/animations/rotating/rotate.less: -------------------------------------------------------------------------------- 1 | @keyframes rotateIn { 2 | from { 3 | transform-origin: center; 4 | transform: rotate3d(0, 0, 1, -200deg); 5 | opacity: 0; 6 | } 7 | 8 | to { 9 | transform-origin: center; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | @keyframes rotateOut { 16 | from { 17 | transform-origin: center; 18 | opacity: 1; 19 | } 20 | 21 | to { 22 | transform-origin: center; 23 | transform: rotate3d(0, 0, 1, 200deg); 24 | opacity: 0; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/animations/rotating/rotateUpLeft.less: -------------------------------------------------------------------------------- 1 | @keyframes rotateInUpLeft { 2 | from { 3 | transform-origin: left bottom; 4 | transform: rotate3d(0, 0, 1, 45deg); 5 | opacity: 0; 6 | } 7 | 8 | to { 9 | transform-origin: left bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | @keyframes rotateOutUpLeft { 16 | from { 17 | transform-origin: left bottom; 18 | opacity: 1; 19 | } 20 | 21 | to { 22 | transform-origin: left bottom; 23 | transform: rotate3d(0, 0, 1, -45deg); 24 | opacity: 0; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/animations/rotating/rotateDownLeft.less: -------------------------------------------------------------------------------- 1 | @keyframes rotateInDownLeft { 2 | from { 3 | transform-origin: left bottom; 4 | transform: rotate3d(0, 0, 1, -45deg); 5 | opacity: 0; 6 | } 7 | 8 | to { 9 | transform-origin: left bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | @keyframes rotateOutDownLeft { 16 | from { 17 | transform-origin: left bottom; 18 | opacity: 1; 19 | } 20 | 21 | to { 22 | transform-origin: left bottom; 23 | transform: rotate3d(0, 0, 1, 45deg); 24 | opacity: 0; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/animations/rotating/rotateUpRight.less: -------------------------------------------------------------------------------- 1 | @keyframes rotateInUpRight { 2 | from { 3 | transform-origin: right bottom; 4 | transform: rotate3d(0, 0, 1, -90deg); 5 | opacity: 0; 6 | } 7 | 8 | to { 9 | transform-origin: right bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | @keyframes rotateOutUpRight { 16 | from { 17 | transform-origin: right bottom; 18 | opacity: 1; 19 | } 20 | 21 | to { 22 | transform-origin: right bottom; 23 | transform: rotate3d(0, 0, 1, 90deg); 24 | opacity: 0; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/animations/rotating/rotateDownRight.less: -------------------------------------------------------------------------------- 1 | @keyframes rotateInDownRight { 2 | from { 3 | transform-origin: right bottom; 4 | transform: rotate3d(0, 0, 1, 45deg); 5 | opacity: 0; 6 | } 7 | 8 | to { 9 | transform-origin: right bottom; 10 | transform: none; 11 | opacity: 1; 12 | } 13 | } 14 | 15 | @keyframes rotateOutDownRight { 16 | from { 17 | transform-origin: right bottom; 18 | opacity: 1; 19 | } 20 | 21 | to { 22 | transform-origin: right bottom; 23 | transform: rotate3d(0, 0, 1, -45deg); 24 | opacity: 0; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/vue-animate.less: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | * vue-animate v0.0.4 5 | * (c) 2016 Hayden Bickerton 6 | * Released under the MIT License. 7 | * Documentation: https://github.com/haydenbbickerton/vue-animate 8 | */ 9 | 10 | @animationDuration: 1s; 11 | @animations: './animations'; 12 | 13 | // Main mixin 14 | @import "make-transitions"; 15 | 16 | // Our animations 17 | @import "@{animations}/bouncing/all"; 18 | @import "@{animations}/fading/all"; 19 | @import "@{animations}/rotating/all"; 20 | @import "@{animations}/sliding/all"; 21 | @import "@{animations}/zooming/all"; 22 | -------------------------------------------------------------------------------- /src/animations/zooming/zoomLeft.less: -------------------------------------------------------------------------------- 1 | @keyframes zoomInLeft { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | @keyframes zoomOutLeft { 16 | 40% { 17 | opacity: 1; 18 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 19 | } 20 | 21 | to { 22 | opacity: 0; 23 | transform: scale(.1) translate3d(-2000px, 0, 0); 24 | transform-origin: left center; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/animations/zooming/zoomRight.less: -------------------------------------------------------------------------------- 1 | @keyframes zoomInRight { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | @keyframes zoomOutRight { 16 | 40% { 17 | opacity: 1; 18 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 19 | } 20 | 21 | to { 22 | opacity: 0; 23 | transform: scale(.1) translate3d(2000px, 0, 0); 24 | transform-origin: right center; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/animations/bouncing/bounceLeft.less: -------------------------------------------------------------------------------- 1 | @keyframes bounceInLeft { 2 | from, 60%, 75%, 90%, to { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: translate3d(-3000px, 0, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(25px, 0, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(-10px, 0, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(5px, 0, 0); 22 | } 23 | 24 | to { 25 | transform: none; 26 | } 27 | } 28 | 29 | @keyframes bounceOutLeft { 30 | 20% { 31 | opacity: 1; 32 | transform: translate3d(20px, 0, 0); 33 | } 34 | 35 | to { 36 | opacity: 0; 37 | transform: translate3d(-2000px, 0, 0); 38 | } 39 | } -------------------------------------------------------------------------------- /src/animations/bouncing/bounceRight.less: -------------------------------------------------------------------------------- 1 | @keyframes bounceInRight { 2 | from, 60%, 75%, 90%, to { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | from { 7 | opacity: 0; 8 | transform: translate3d(3000px, 0, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(-25px, 0, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(10px, 0, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(-5px, 0, 0); 22 | } 23 | 24 | to { 25 | transform: none; 26 | } 27 | } 28 | 29 | @keyframes bounceOutRight { 30 | 20% { 31 | opacity: 1; 32 | transform: translate3d(-20px, 0, 0); 33 | } 34 | 35 | to { 36 | opacity: 0; 37 | transform: translate3d(2000px, 0, 0); 38 | } 39 | } -------------------------------------------------------------------------------- /src/animations/bouncing/bounceDown.less: -------------------------------------------------------------------------------- 1 | @keyframes bounceInDown { 2 | from, 60%, 75%, 90%, to { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: translate3d(0, -3000px, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(0, 25px, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(0, -10px, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(0, 5px, 0); 22 | } 23 | 24 | to { 25 | transform: none; 26 | } 27 | } 28 | 29 | @keyframes bounceOutDown { 30 | 20% { 31 | transform: translate3d(0, 10px, 0); 32 | } 33 | 34 | 40%, 45% { 35 | opacity: 1; 36 | transform: translate3d(0, -20px, 0); 37 | } 38 | 39 | to { 40 | opacity: 0; 41 | transform: translate3d(0, 2000px, 0); 42 | } 43 | } -------------------------------------------------------------------------------- /src/animations/bouncing/bounceUp.less: -------------------------------------------------------------------------------- 1 | @keyframes bounceInUp { 2 | from, 60%, 75%, 90%, to { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | from { 7 | opacity: 0; 8 | transform: translate3d(0, 3000px, 0); 9 | } 10 | 11 | 60% { 12 | opacity: 1; 13 | transform: translate3d(0, -20px, 0); 14 | } 15 | 16 | 75% { 17 | transform: translate3d(0, 10px, 0); 18 | } 19 | 20 | 90% { 21 | transform: translate3d(0, -5px, 0); 22 | } 23 | 24 | to { 25 | transform: translate3d(0, 0, 0); 26 | } 27 | } 28 | 29 | @keyframes bounceOutUp { 30 | 20% { 31 | transform: translate3d(0, -10px, 0); 32 | } 33 | 34 | 40%, 45% { 35 | opacity: 1; 36 | transform: translate3d(0, 20px, 0); 37 | } 38 | 39 | to { 40 | opacity: 0; 41 | transform: translate3d(0, -2000px, 0); 42 | } 43 | } -------------------------------------------------------------------------------- /src/animations/zooming/zoomUp.less: -------------------------------------------------------------------------------- 1 | @keyframes zoomInUp { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | @keyframes zoomOutUp { 16 | 40% { 17 | opacity: 1; 18 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 19 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 20 | } 21 | 22 | to { 23 | opacity: 0; 24 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 25 | transform-origin: center bottom; 26 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/animations/zooming/zoomDown.less: -------------------------------------------------------------------------------- 1 | @keyframes zoomInDown { 2 | from { 3 | opacity: 0; 4 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 5 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 6 | } 7 | 8 | 60% { 9 | opacity: 1; 10 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 11 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 12 | } 13 | } 14 | 15 | @keyframes zoomOutDown { 16 | 40% { 17 | opacity: 1; 18 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 19 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 20 | } 21 | 22 | to { 23 | opacity: 0; 24 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 25 | transform-origin: center bottom; 26 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/animations/bouncing/bounce.less: -------------------------------------------------------------------------------- 1 | @keyframes bounceIn { 2 | from, 20%, 40%, 60%, 80%, to { 3 | animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 4 | } 5 | 6 | 0% { 7 | opacity: 0; 8 | transform: scale3d(.3, .3, .3); 9 | } 10 | 11 | 20% { 12 | transform: scale3d(1.1, 1.1, 1.1); 13 | } 14 | 15 | 40% { 16 | transform: scale3d(.9, .9, .9); 17 | } 18 | 19 | 60% { 20 | opacity: 1; 21 | transform: scale3d(1.03, 1.03, 1.03); 22 | } 23 | 24 | 80% { 25 | transform: scale3d(.97, .97, .97); 26 | } 27 | 28 | to { 29 | opacity: 1; 30 | transform: scale3d(1, 1, 1); 31 | } 32 | } 33 | 34 | @keyframes bounceOut { 35 | 20% { 36 | transform: scale3d(.9, .9, .9); 37 | } 38 | 39 | 50%, 55% { 40 | opacity: 1; 41 | transform: scale3d(1.1, 1.1, 1.1); 42 | } 43 | 44 | to { 45 | opacity: 0; 46 | transform: scale3d(.3, .3, .3); 47 | } 48 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Hayden Bickerton 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /src/make-transitions.less: -------------------------------------------------------------------------------- 1 | .make-transitions(@base, @names) { 2 | 3 | // We'll make a single rule for all transitions that 4 | // sets the animation duration. This is basically the 5 | // stock 'animate' class from Animate.css. 6 | @classesJoin: replace(~'@{names}', ', ', '-transition, .@{base}', g); 7 | 8 | .@{base}-transition, .@{base}@{classesJoin}-transition { 9 | animation-duration: @animationDuration; 10 | animation-fill-mode: both; 11 | } 12 | 13 | // Entrance/Exit for the base class 14 | .@{base}-enter, .@{base}In { 15 | animation-name: ~'@{base}In'; 16 | } 17 | 18 | .@{base}-leave, .@{base}Out { 19 | animation-name: ~'@{base}Out'; 20 | } 21 | 22 | // Loop through the different animations, and set 23 | // the enter/leave animation names for each class. 24 | .-(@i: length(@names)) when (@i > 0) { 25 | 26 | @name: extract(@names, @i); 27 | .@{base}@{name}-enter, .@{base}In@{name} { 28 | animation-name: ~'@{base}In@{name}'; 29 | } 30 | .@{base}@{name}-leave, .@{base}Out@{name} { 31 | animation-name: ~'@{base}Out@{name}'; 32 | } 33 | .-((@i - 1)); 34 | 35 | } .-; 36 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-animate", 3 | "version": "0.0.4", 4 | "description": "LESS cross-browser animation library, for use with Vue.js. Ported from Animate.css.", 5 | "author": { 6 | "name": "Hayden Bickerton", 7 | "email": "haydenbbickerton@gmail.com" 8 | }, 9 | "homepage": "https://github.com/haydenbbickerton/vue-animate", 10 | "license": "MIT", 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/haydenbbickerton/vue-animate.git" 14 | }, 15 | "bugs": { 16 | "url": "https://github.com/haydenbbickerton/vue-animate/issues" 17 | }, 18 | "keywords": [ 19 | "less", 20 | "animate", 21 | "animate.css", 22 | "vue", 23 | "vue.js", 24 | "transition", 25 | "vue-animate", 26 | "css" 27 | ], 28 | "files": [ 29 | "dist/vue-animate.css", 30 | "dist/vue-animate.min.css", 31 | "src" 32 | ], 33 | "devDependencies": { 34 | "less": "^2.4.0", 35 | "less-plugin-autoprefix": "^1.5.1", 36 | "less-plugin-clean-css": "^1.5.0" 37 | }, 38 | "scripts": { 39 | "build": "lessc --autoprefix='> 5%' src/vue-animate.less > dist/vue-animate.css && lessc --autoprefix='> 5%' --clean-css='--compatibility=ie8 --advanced' src/vue-animate.less > dist/vue-animate.min.css" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #vue-animate 2 | *Cross-browser CSS3 animation library* 3 | 4 | [![Version](https://img.shields.io/npm/v/vue-animate.svg?style=flat-square)](https://www.npmjs.com/package/vue-animate) 5 | [![License](https://img.shields.io/npm/l/vue-animate.svg?style=flat-square)](LICENSE) 6 | 7 | A [Vue.js](http://vuejs.org/ "Vue.js") port of [Animate.css](https://github.com/daneden/animate.css "Animate.css"). For use with Vue's built-in transitions. 8 | 9 | - **[DEMO](http://luoye.pw/vue-animate-demo/)** (courtesy of [luoye-fe](https://github.com/luoye-fe)) 10 | 11 | ##Installation 12 | ####HTML 13 | Include the stylesheet: 14 | 15 | ```html 16 | 17 | 18 | 19 | ``` 20 | ####npm 21 | If you're on webpack and using the [css-loader](https://github.com/webpack/css-loader "css loader"), you can use something like this: 22 | ```shell 23 | npm install --save vue-animate 24 | ``` 25 | ```js 26 | require('vue-animate/dist/vue-animate.min.css') 27 | ``` 28 | ####Less 29 | ```less 30 | @import "/src/vue-animate.less"; 31 | ``` 32 | 33 | ####Building 34 | ```shell 35 | git clone https://github.com/haydenbbickerton/vue-animate.git 36 | cd vue-animate 37 | npm install 38 | npm run build #Compiled .css files go to the dist folder 39 | ``` 40 | 41 | ##Usage 42 | 43 | Use [Vue.js transitions](http://vuejs.org/guide/transitions.html "Vue.js Transitions") as you normally would, but for the transition name you will use one of [Animate.css animations](https://github.com/daneden/animate.css#basic-usage "animations") **removing** the ***In/Out*** from the name. 44 | 45 | For example, if I want to use *fadeInLeft* and *fadeOutLeft* on my element, I'll write: 46 | ```html 47 |
hello
48 | ``` 49 | enter/leave is already written in the stylesheet, so just remove *In/Out* from the name and you're golden. 50 | 51 | ####Custom Transition Classes 52 | As of 0.0.3, Animate.css's original classnames are supported on enter/leave transitions. So if you're going to use [Custom Transition Classes](http://vuejs.org/guide/transitions.html#Custom-Transition-Classes "Custom Transition Classes"), you can either add *-enter/-leave* to the classes: 53 | 54 | ```js 55 | Vue.transition('bounce', { 56 | enterClass: 'bounceLeft-enter', 57 | leaveClass: 'bounceRight-leave' 58 | }) 59 | ``` 60 | Or use the regular *In/Out* syntax: 61 | 62 | ```js 63 | Vue.transition('bounce', { 64 | enterClass: 'bounceInLeft', 65 | leaveClass: 'bounceOutRight' 66 | }) 67 | ``` 68 | 69 | ####Supported Animations 70 | Not all [Animate.css animations](https://github.com/daneden/animate.css#basic-usage "animations") are supported at the moment. Here is a list of what's in vue-animate (aka - *what you can put in the transition="x"* attribute) as of right now: 71 | 72 | #####Bounce 73 | * `bounce` 74 | * `bounceDown` 75 | * `bounceLeft` 76 | * `bounceRight` 77 | * `bounceUp` 78 | 79 | #####Fade 80 | * `fade` 81 | * `fadeDown` 82 | * `fadeDownBig` 83 | * `fadeLeft` 84 | * `fadeLeftBig` 85 | * `fadeRight` 86 | * `fadeRightBig` 87 | * `fadeUp` 88 | * `fadeUpBig` 89 | 90 | #####Rotate 91 | * `rotate` 92 | * `rotateDownLeft` 93 | * `rotateDownRight` 94 | * `rotateUpLeft` 95 | * `rotateUpRight` 96 | 97 | #####Slide 98 | * `slideDown` 99 | * `slideLeft` 100 | * `slideRight` 101 | * `slideUp` 102 | 103 | #####Zoom 104 | * `zoom` 105 | * `zoomDown` 106 | * `zoomLeft` 107 | * `zoomRight` 108 | * `zoomUp` 109 | 110 | # License 111 | 112 | [MIT](http://opensource.org/licenses/MIT) 113 | 114 | ## Contributing 115 | 116 | Pull requests are welcome :) 117 | -------------------------------------------------------------------------------- /dist/vue-animate.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";/*! 2 | * vue-animate v0.0.4 3 | * (c) 2016 Hayden Bickerton 4 | * Released under the MIT License. 5 | * Documentation: https://github.com/haydenbbickerton/vue-animate 6 | */@-webkit-keyframes bounceIn{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{20%,40%,60%,80%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@-webkit-keyframes bounceInDown{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInDown{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@-webkit-keyframes bounceInLeft{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@-webkit-keyframes bounceInRight{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInRight{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@-webkit-keyframes bounceInUp{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{60%,75%,90%,from,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}from{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounce-transition,.bounceDown-transition,.bounceLeft-transition,.bounceRight-transition,.bounceUp-transition{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.bounce-enter,.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}.bounce-leave,.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}.bounceInUp,.bounceUp-enter{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}.bounceOutUp,.bounceUp-leave{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}.bounceInRight,.bounceRight-enter{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}.bounceOutRight,.bounceRight-leave{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}.bounceInLeft,.bounceLeft-enter{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}.bounceLeft-leave,.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}.bounceDown-enter,.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}.bounceDown-leave,.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadeOut{from{opacity:1}to{opacity:0}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}@-webkit-keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeOutDown{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes fadeInDownBig{from{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{from{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeOutDownBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@-webkit-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeOutLeft{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes fadeInLeftBig{from{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{from{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeOutLeftBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@-webkit-keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeOutRight{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes fadeInRightBig{from{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{from{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeOutRightBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeOutUp{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes fadeInUpBig{from{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{from{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeOutUp{from{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fade-transition,.fadeDown-transition,.fadeDownBig-transition,.fadeLeft-transition,.fadeLeftBig-transition,.fadeRight-transition,.fadeRightBig-transition,.fadeUp-transition,.fadeUpBig-transition{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.fade-enter,.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}.fade-leave,.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}.fadeInUpBig,.fadeUpBig-enter{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}.fadeOutUpBig,.fadeUpBig-leave{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}.fadeInUp,.fadeUp-enter{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}.fadeOutUp,.fadeUp-leave{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}.fadeInRightBig,.fadeRightBig-enter{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}.fadeOutRightBig,.fadeRightBig-leave{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}.fadeInRight,.fadeRight-enter{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}.fadeOutRight,.fadeRight-leave{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}.fadeInLeftBig,.fadeLeftBig-enter{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}.fadeLeftBig-leave,.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}.fadeInLeft,.fadeLeft-enter{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}.fadeLeft-leave,.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}.fadeDownBig-enter,.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}.fadeDownBig-leave,.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}.fadeDown-enter,.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}.fadeDown-leave,.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes rotateIn{from{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{from{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@-webkit-keyframes rotateOut{from{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{from{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@-webkit-keyframes rotateInDownLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@-webkit-keyframes rotateOutDownLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}@-webkit-keyframes rotateInDownRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@-webkit-keyframes rotateOutDownRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@-webkit-keyframes rotateInUpLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@-webkit-keyframes rotateOutUpLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{from{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@-webkit-keyframes rotateInUpRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@-webkit-keyframes rotateOutUpRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{from{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotate-transition,.rotateDownLeft-transition,.rotateDownRight-transition,.rotateUpLeft-transition,.rotateUpRight-transition{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.rotate-enter,.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}.rotate-leave,.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}.rotateInUpRight,.rotateUpRight-enter{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}.rotateOutUpRight,.rotateUpRight-leave{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}.rotateInUpLeft,.rotateUpLeft-enter{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}.rotateOutUpLeft,.rotateUpLeft-leave{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}.rotateDownRight-enter,.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}.rotateDownRight-leave,.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}.rotateDownLeft-enter,.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}.rotateDownLeft-leave,.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes slideInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInDown{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOutDown{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes slideInLeft{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInLeft{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOutLeft{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes slideInRight{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInRight{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOutRight{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes slideInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInUp{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOutUp{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slide-transition,.slideDown-transition,.slideLeft-transition,.slideRight-transition,.slideUp-transition{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.slide-enter,.slideIn{-webkit-animation-name:slideIn;animation-name:slideIn}.slide-leave,.slideOut{-webkit-animation-name:slideOut;animation-name:slideOut}.slideInUp,.slideUp-enter{-webkit-animation-name:slideInUp;animation-name:slideInUp}.slideOutUp,.slideUp-leave{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.slideInRight,.slideRight-enter{-webkit-animation-name:slideInRight;animation-name:slideInRight}.slideOutRight,.slideRight-leave{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}.slideInLeft,.slideLeft-enter{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}.slideLeft-leave,.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}.slideDown-enter,.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}.slideDown-leave,.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes zoomInDown{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@-webkit-keyframes zoomInLeft{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@-webkit-keyframes zoomInRight{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@-webkit-keyframes zoomInUp{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{from{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoom-transition,.zoomDown-transition,.zoomLeft-transition,.zoomRight-transition,.zoomUp-transition{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoom-enter,.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}.zoom-leave,.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}.zoomInUp,.zoomUp-enter{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}.zoomOutUp,.zoomUp-leave{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}.zoomInRight,.zoomRight-enter{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}.zoomOutRight,.zoomRight-leave{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}.zoomInLeft,.zoomLeft-enter{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}.zoomLeft-leave,.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}.zoomDown-enter,.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}.zoomDown-leave,.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown} -------------------------------------------------------------------------------- /dist/vue-animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! 3 | * vue-animate v0.0.4 4 | * (c) 2016 Hayden Bickerton 5 | * Released under the MIT License. 6 | * Documentation: https://github.com/haydenbbickerton/vue-animate 7 | */ 8 | @-webkit-keyframes bounceIn { 9 | from, 10 | 20%, 11 | 40%, 12 | 60%, 13 | 80%, 14 | to { 15 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 16 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 17 | } 18 | 0% { 19 | opacity: 0; 20 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 21 | transform: scale3d(0.3, 0.3, 0.3); 22 | } 23 | 20% { 24 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 25 | transform: scale3d(1.1, 1.1, 1.1); 26 | } 27 | 40% { 28 | -webkit-transform: scale3d(0.9, 0.9, 0.9); 29 | transform: scale3d(0.9, 0.9, 0.9); 30 | } 31 | 60% { 32 | opacity: 1; 33 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 34 | transform: scale3d(1.03, 1.03, 1.03); 35 | } 36 | 80% { 37 | -webkit-transform: scale3d(0.97, 0.97, 0.97); 38 | transform: scale3d(0.97, 0.97, 0.97); 39 | } 40 | to { 41 | opacity: 1; 42 | -webkit-transform: scale3d(1, 1, 1); 43 | transform: scale3d(1, 1, 1); 44 | } 45 | } 46 | @keyframes bounceIn { 47 | from, 48 | 20%, 49 | 40%, 50 | 60%, 51 | 80%, 52 | to { 53 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 54 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 55 | } 56 | 0% { 57 | opacity: 0; 58 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 59 | transform: scale3d(0.3, 0.3, 0.3); 60 | } 61 | 20% { 62 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 63 | transform: scale3d(1.1, 1.1, 1.1); 64 | } 65 | 40% { 66 | -webkit-transform: scale3d(0.9, 0.9, 0.9); 67 | transform: scale3d(0.9, 0.9, 0.9); 68 | } 69 | 60% { 70 | opacity: 1; 71 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 72 | transform: scale3d(1.03, 1.03, 1.03); 73 | } 74 | 80% { 75 | -webkit-transform: scale3d(0.97, 0.97, 0.97); 76 | transform: scale3d(0.97, 0.97, 0.97); 77 | } 78 | to { 79 | opacity: 1; 80 | -webkit-transform: scale3d(1, 1, 1); 81 | transform: scale3d(1, 1, 1); 82 | } 83 | } 84 | @-webkit-keyframes bounceOut { 85 | 20% { 86 | -webkit-transform: scale3d(0.9, 0.9, 0.9); 87 | transform: scale3d(0.9, 0.9, 0.9); 88 | } 89 | 50%, 90 | 55% { 91 | opacity: 1; 92 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 93 | transform: scale3d(1.1, 1.1, 1.1); 94 | } 95 | to { 96 | opacity: 0; 97 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 98 | transform: scale3d(0.3, 0.3, 0.3); 99 | } 100 | } 101 | @keyframes bounceOut { 102 | 20% { 103 | -webkit-transform: scale3d(0.9, 0.9, 0.9); 104 | transform: scale3d(0.9, 0.9, 0.9); 105 | } 106 | 50%, 107 | 55% { 108 | opacity: 1; 109 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 110 | transform: scale3d(1.1, 1.1, 1.1); 111 | } 112 | to { 113 | opacity: 0; 114 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 115 | transform: scale3d(0.3, 0.3, 0.3); 116 | } 117 | } 118 | @-webkit-keyframes bounceInDown { 119 | from, 120 | 60%, 121 | 75%, 122 | 90%, 123 | to { 124 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 125 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 126 | } 127 | 0% { 128 | opacity: 0; 129 | -webkit-transform: translate3d(0, -3000px, 0); 130 | transform: translate3d(0, -3000px, 0); 131 | } 132 | 60% { 133 | opacity: 1; 134 | -webkit-transform: translate3d(0, 25px, 0); 135 | transform: translate3d(0, 25px, 0); 136 | } 137 | 75% { 138 | -webkit-transform: translate3d(0, -10px, 0); 139 | transform: translate3d(0, -10px, 0); 140 | } 141 | 90% { 142 | -webkit-transform: translate3d(0, 5px, 0); 143 | transform: translate3d(0, 5px, 0); 144 | } 145 | to { 146 | -webkit-transform: none; 147 | transform: none; 148 | } 149 | } 150 | @keyframes bounceInDown { 151 | from, 152 | 60%, 153 | 75%, 154 | 90%, 155 | to { 156 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 157 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 158 | } 159 | 0% { 160 | opacity: 0; 161 | -webkit-transform: translate3d(0, -3000px, 0); 162 | transform: translate3d(0, -3000px, 0); 163 | } 164 | 60% { 165 | opacity: 1; 166 | -webkit-transform: translate3d(0, 25px, 0); 167 | transform: translate3d(0, 25px, 0); 168 | } 169 | 75% { 170 | -webkit-transform: translate3d(0, -10px, 0); 171 | transform: translate3d(0, -10px, 0); 172 | } 173 | 90% { 174 | -webkit-transform: translate3d(0, 5px, 0); 175 | transform: translate3d(0, 5px, 0); 176 | } 177 | to { 178 | -webkit-transform: none; 179 | transform: none; 180 | } 181 | } 182 | @-webkit-keyframes bounceOutDown { 183 | 20% { 184 | -webkit-transform: translate3d(0, 10px, 0); 185 | transform: translate3d(0, 10px, 0); 186 | } 187 | 40%, 188 | 45% { 189 | opacity: 1; 190 | -webkit-transform: translate3d(0, -20px, 0); 191 | transform: translate3d(0, -20px, 0); 192 | } 193 | to { 194 | opacity: 0; 195 | -webkit-transform: translate3d(0, 2000px, 0); 196 | transform: translate3d(0, 2000px, 0); 197 | } 198 | } 199 | @keyframes bounceOutDown { 200 | 20% { 201 | -webkit-transform: translate3d(0, 10px, 0); 202 | transform: translate3d(0, 10px, 0); 203 | } 204 | 40%, 205 | 45% { 206 | opacity: 1; 207 | -webkit-transform: translate3d(0, -20px, 0); 208 | transform: translate3d(0, -20px, 0); 209 | } 210 | to { 211 | opacity: 0; 212 | -webkit-transform: translate3d(0, 2000px, 0); 213 | transform: translate3d(0, 2000px, 0); 214 | } 215 | } 216 | @-webkit-keyframes bounceInLeft { 217 | from, 218 | 60%, 219 | 75%, 220 | 90%, 221 | to { 222 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 223 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 224 | } 225 | 0% { 226 | opacity: 0; 227 | -webkit-transform: translate3d(-3000px, 0, 0); 228 | transform: translate3d(-3000px, 0, 0); 229 | } 230 | 60% { 231 | opacity: 1; 232 | -webkit-transform: translate3d(25px, 0, 0); 233 | transform: translate3d(25px, 0, 0); 234 | } 235 | 75% { 236 | -webkit-transform: translate3d(-10px, 0, 0); 237 | transform: translate3d(-10px, 0, 0); 238 | } 239 | 90% { 240 | -webkit-transform: translate3d(5px, 0, 0); 241 | transform: translate3d(5px, 0, 0); 242 | } 243 | to { 244 | -webkit-transform: none; 245 | transform: none; 246 | } 247 | } 248 | @keyframes bounceInLeft { 249 | from, 250 | 60%, 251 | 75%, 252 | 90%, 253 | to { 254 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 255 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 256 | } 257 | 0% { 258 | opacity: 0; 259 | -webkit-transform: translate3d(-3000px, 0, 0); 260 | transform: translate3d(-3000px, 0, 0); 261 | } 262 | 60% { 263 | opacity: 1; 264 | -webkit-transform: translate3d(25px, 0, 0); 265 | transform: translate3d(25px, 0, 0); 266 | } 267 | 75% { 268 | -webkit-transform: translate3d(-10px, 0, 0); 269 | transform: translate3d(-10px, 0, 0); 270 | } 271 | 90% { 272 | -webkit-transform: translate3d(5px, 0, 0); 273 | transform: translate3d(5px, 0, 0); 274 | } 275 | to { 276 | -webkit-transform: none; 277 | transform: none; 278 | } 279 | } 280 | @-webkit-keyframes bounceOutLeft { 281 | 20% { 282 | opacity: 1; 283 | -webkit-transform: translate3d(20px, 0, 0); 284 | transform: translate3d(20px, 0, 0); 285 | } 286 | to { 287 | opacity: 0; 288 | -webkit-transform: translate3d(-2000px, 0, 0); 289 | transform: translate3d(-2000px, 0, 0); 290 | } 291 | } 292 | @keyframes bounceOutLeft { 293 | 20% { 294 | opacity: 1; 295 | -webkit-transform: translate3d(20px, 0, 0); 296 | transform: translate3d(20px, 0, 0); 297 | } 298 | to { 299 | opacity: 0; 300 | -webkit-transform: translate3d(-2000px, 0, 0); 301 | transform: translate3d(-2000px, 0, 0); 302 | } 303 | } 304 | @-webkit-keyframes bounceInRight { 305 | from, 306 | 60%, 307 | 75%, 308 | 90%, 309 | to { 310 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 311 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 312 | } 313 | from { 314 | opacity: 0; 315 | -webkit-transform: translate3d(3000px, 0, 0); 316 | transform: translate3d(3000px, 0, 0); 317 | } 318 | 60% { 319 | opacity: 1; 320 | -webkit-transform: translate3d(-25px, 0, 0); 321 | transform: translate3d(-25px, 0, 0); 322 | } 323 | 75% { 324 | -webkit-transform: translate3d(10px, 0, 0); 325 | transform: translate3d(10px, 0, 0); 326 | } 327 | 90% { 328 | -webkit-transform: translate3d(-5px, 0, 0); 329 | transform: translate3d(-5px, 0, 0); 330 | } 331 | to { 332 | -webkit-transform: none; 333 | transform: none; 334 | } 335 | } 336 | @keyframes bounceInRight { 337 | from, 338 | 60%, 339 | 75%, 340 | 90%, 341 | to { 342 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 343 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 344 | } 345 | from { 346 | opacity: 0; 347 | -webkit-transform: translate3d(3000px, 0, 0); 348 | transform: translate3d(3000px, 0, 0); 349 | } 350 | 60% { 351 | opacity: 1; 352 | -webkit-transform: translate3d(-25px, 0, 0); 353 | transform: translate3d(-25px, 0, 0); 354 | } 355 | 75% { 356 | -webkit-transform: translate3d(10px, 0, 0); 357 | transform: translate3d(10px, 0, 0); 358 | } 359 | 90% { 360 | -webkit-transform: translate3d(-5px, 0, 0); 361 | transform: translate3d(-5px, 0, 0); 362 | } 363 | to { 364 | -webkit-transform: none; 365 | transform: none; 366 | } 367 | } 368 | @-webkit-keyframes bounceOutRight { 369 | 20% { 370 | opacity: 1; 371 | -webkit-transform: translate3d(-20px, 0, 0); 372 | transform: translate3d(-20px, 0, 0); 373 | } 374 | to { 375 | opacity: 0; 376 | -webkit-transform: translate3d(2000px, 0, 0); 377 | transform: translate3d(2000px, 0, 0); 378 | } 379 | } 380 | @keyframes bounceOutRight { 381 | 20% { 382 | opacity: 1; 383 | -webkit-transform: translate3d(-20px, 0, 0); 384 | transform: translate3d(-20px, 0, 0); 385 | } 386 | to { 387 | opacity: 0; 388 | -webkit-transform: translate3d(2000px, 0, 0); 389 | transform: translate3d(2000px, 0, 0); 390 | } 391 | } 392 | @-webkit-keyframes bounceInUp { 393 | from, 394 | 60%, 395 | 75%, 396 | 90%, 397 | to { 398 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 399 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 400 | } 401 | from { 402 | opacity: 0; 403 | -webkit-transform: translate3d(0, 3000px, 0); 404 | transform: translate3d(0, 3000px, 0); 405 | } 406 | 60% { 407 | opacity: 1; 408 | -webkit-transform: translate3d(0, -20px, 0); 409 | transform: translate3d(0, -20px, 0); 410 | } 411 | 75% { 412 | -webkit-transform: translate3d(0, 10px, 0); 413 | transform: translate3d(0, 10px, 0); 414 | } 415 | 90% { 416 | -webkit-transform: translate3d(0, -5px, 0); 417 | transform: translate3d(0, -5px, 0); 418 | } 419 | to { 420 | -webkit-transform: translate3d(0, 0, 0); 421 | transform: translate3d(0, 0, 0); 422 | } 423 | } 424 | @keyframes bounceInUp { 425 | from, 426 | 60%, 427 | 75%, 428 | 90%, 429 | to { 430 | -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 431 | animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 432 | } 433 | from { 434 | opacity: 0; 435 | -webkit-transform: translate3d(0, 3000px, 0); 436 | transform: translate3d(0, 3000px, 0); 437 | } 438 | 60% { 439 | opacity: 1; 440 | -webkit-transform: translate3d(0, -20px, 0); 441 | transform: translate3d(0, -20px, 0); 442 | } 443 | 75% { 444 | -webkit-transform: translate3d(0, 10px, 0); 445 | transform: translate3d(0, 10px, 0); 446 | } 447 | 90% { 448 | -webkit-transform: translate3d(0, -5px, 0); 449 | transform: translate3d(0, -5px, 0); 450 | } 451 | to { 452 | -webkit-transform: translate3d(0, 0, 0); 453 | transform: translate3d(0, 0, 0); 454 | } 455 | } 456 | @-webkit-keyframes bounceOutUp { 457 | 20% { 458 | -webkit-transform: translate3d(0, -10px, 0); 459 | transform: translate3d(0, -10px, 0); 460 | } 461 | 40%, 462 | 45% { 463 | opacity: 1; 464 | -webkit-transform: translate3d(0, 20px, 0); 465 | transform: translate3d(0, 20px, 0); 466 | } 467 | to { 468 | opacity: 0; 469 | -webkit-transform: translate3d(0, -2000px, 0); 470 | transform: translate3d(0, -2000px, 0); 471 | } 472 | } 473 | @keyframes bounceOutUp { 474 | 20% { 475 | -webkit-transform: translate3d(0, -10px, 0); 476 | transform: translate3d(0, -10px, 0); 477 | } 478 | 40%, 479 | 45% { 480 | opacity: 1; 481 | -webkit-transform: translate3d(0, 20px, 0); 482 | transform: translate3d(0, 20px, 0); 483 | } 484 | to { 485 | opacity: 0; 486 | -webkit-transform: translate3d(0, -2000px, 0); 487 | transform: translate3d(0, -2000px, 0); 488 | } 489 | } 490 | .bounce-transition, 491 | .bounceDown-transition, .bounceLeft-transition, .bounceRight-transition, .bounceUp-transition { 492 | -webkit-animation-duration: 1s; 493 | animation-duration: 1s; 494 | -webkit-animation-fill-mode: both; 495 | animation-fill-mode: both; 496 | } 497 | .bounce-enter, 498 | .bounceIn { 499 | -webkit-animation-name: bounceIn; 500 | animation-name: bounceIn; 501 | } 502 | .bounce-leave, 503 | .bounceOut { 504 | -webkit-animation-name: bounceOut; 505 | animation-name: bounceOut; 506 | } 507 | .bounceUp-enter, 508 | .bounceInUp { 509 | -webkit-animation-name: bounceInUp; 510 | animation-name: bounceInUp; 511 | } 512 | .bounceUp-leave, 513 | .bounceOutUp { 514 | -webkit-animation-name: bounceOutUp; 515 | animation-name: bounceOutUp; 516 | } 517 | .bounceRight-enter, 518 | .bounceInRight { 519 | -webkit-animation-name: bounceInRight; 520 | animation-name: bounceInRight; 521 | } 522 | .bounceRight-leave, 523 | .bounceOutRight { 524 | -webkit-animation-name: bounceOutRight; 525 | animation-name: bounceOutRight; 526 | } 527 | .bounceLeft-enter, 528 | .bounceInLeft { 529 | -webkit-animation-name: bounceInLeft; 530 | animation-name: bounceInLeft; 531 | } 532 | .bounceLeft-leave, 533 | .bounceOutLeft { 534 | -webkit-animation-name: bounceOutLeft; 535 | animation-name: bounceOutLeft; 536 | } 537 | .bounceDown-enter, 538 | .bounceInDown { 539 | -webkit-animation-name: bounceInDown; 540 | animation-name: bounceInDown; 541 | } 542 | .bounceDown-leave, 543 | .bounceOutDown { 544 | -webkit-animation-name: bounceOutDown; 545 | animation-name: bounceOutDown; 546 | } 547 | @-webkit-keyframes fadeIn { 548 | from { 549 | opacity: 0; 550 | } 551 | to { 552 | opacity: 1; 553 | } 554 | } 555 | @keyframes fadeIn { 556 | from { 557 | opacity: 0; 558 | } 559 | to { 560 | opacity: 1; 561 | } 562 | } 563 | @-webkit-keyframes fadeOut { 564 | from { 565 | opacity: 1; 566 | } 567 | to { 568 | opacity: 0; 569 | } 570 | } 571 | @keyframes fadeOut { 572 | from { 573 | opacity: 1; 574 | } 575 | to { 576 | opacity: 0; 577 | } 578 | } 579 | @-webkit-keyframes fadeInDown { 580 | from { 581 | opacity: 0; 582 | -webkit-transform: translate3d(0, -100%, 0); 583 | transform: translate3d(0, -100%, 0); 584 | } 585 | to { 586 | opacity: 1; 587 | -webkit-transform: none; 588 | transform: none; 589 | } 590 | } 591 | @keyframes fadeInDown { 592 | from { 593 | opacity: 0; 594 | -webkit-transform: translate3d(0, -100%, 0); 595 | transform: translate3d(0, -100%, 0); 596 | } 597 | to { 598 | opacity: 1; 599 | -webkit-transform: none; 600 | transform: none; 601 | } 602 | } 603 | @-webkit-keyframes fadeOutDown { 604 | from { 605 | opacity: 1; 606 | } 607 | to { 608 | opacity: 0; 609 | -webkit-transform: translate3d(0, 100%, 0); 610 | transform: translate3d(0, 100%, 0); 611 | } 612 | } 613 | @keyframes fadeOutDown { 614 | from { 615 | opacity: 1; 616 | } 617 | to { 618 | opacity: 0; 619 | -webkit-transform: translate3d(0, 100%, 0); 620 | transform: translate3d(0, 100%, 0); 621 | } 622 | } 623 | @-webkit-keyframes fadeInDownBig { 624 | from { 625 | opacity: 0; 626 | -webkit-transform: translate3d(0, -2000px, 0); 627 | transform: translate3d(0, -2000px, 0); 628 | } 629 | to { 630 | opacity: 1; 631 | -webkit-transform: none; 632 | transform: none; 633 | } 634 | } 635 | @keyframes fadeInDownBig { 636 | from { 637 | opacity: 0; 638 | -webkit-transform: translate3d(0, -2000px, 0); 639 | transform: translate3d(0, -2000px, 0); 640 | } 641 | to { 642 | opacity: 1; 643 | -webkit-transform: none; 644 | transform: none; 645 | } 646 | } 647 | @-webkit-keyframes fadeOutDownBig { 648 | from { 649 | opacity: 1; 650 | } 651 | to { 652 | opacity: 0; 653 | -webkit-transform: translate3d(0, 2000px, 0); 654 | transform: translate3d(0, 2000px, 0); 655 | } 656 | } 657 | @keyframes fadeOutDownBig { 658 | from { 659 | opacity: 1; 660 | } 661 | to { 662 | opacity: 0; 663 | -webkit-transform: translate3d(0, 2000px, 0); 664 | transform: translate3d(0, 2000px, 0); 665 | } 666 | } 667 | @-webkit-keyframes fadeInLeft { 668 | from { 669 | opacity: 0; 670 | -webkit-transform: translate3d(-100%, 0, 0); 671 | transform: translate3d(-100%, 0, 0); 672 | } 673 | to { 674 | opacity: 1; 675 | -webkit-transform: none; 676 | transform: none; 677 | } 678 | } 679 | @keyframes fadeInLeft { 680 | from { 681 | opacity: 0; 682 | -webkit-transform: translate3d(-100%, 0, 0); 683 | transform: translate3d(-100%, 0, 0); 684 | } 685 | to { 686 | opacity: 1; 687 | -webkit-transform: none; 688 | transform: none; 689 | } 690 | } 691 | @-webkit-keyframes fadeOutLeft { 692 | from { 693 | opacity: 1; 694 | } 695 | to { 696 | opacity: 0; 697 | -webkit-transform: translate3d(-100%, 0, 0); 698 | transform: translate3d(-100%, 0, 0); 699 | } 700 | } 701 | @keyframes fadeOutLeft { 702 | from { 703 | opacity: 1; 704 | } 705 | to { 706 | opacity: 0; 707 | -webkit-transform: translate3d(-100%, 0, 0); 708 | transform: translate3d(-100%, 0, 0); 709 | } 710 | } 711 | @-webkit-keyframes fadeInLeftBig { 712 | from { 713 | opacity: 0; 714 | -webkit-transform: translate3d(-2000px, 0, 0); 715 | transform: translate3d(-2000px, 0, 0); 716 | } 717 | to { 718 | opacity: 1; 719 | -webkit-transform: none; 720 | transform: none; 721 | } 722 | } 723 | @keyframes fadeInLeftBig { 724 | from { 725 | opacity: 0; 726 | -webkit-transform: translate3d(-2000px, 0, 0); 727 | transform: translate3d(-2000px, 0, 0); 728 | } 729 | to { 730 | opacity: 1; 731 | -webkit-transform: none; 732 | transform: none; 733 | } 734 | } 735 | @-webkit-keyframes fadeOutLeftBig { 736 | from { 737 | opacity: 1; 738 | } 739 | to { 740 | opacity: 0; 741 | -webkit-transform: translate3d(-2000px, 0, 0); 742 | transform: translate3d(-2000px, 0, 0); 743 | } 744 | } 745 | @keyframes fadeOutLeftBig { 746 | from { 747 | opacity: 1; 748 | } 749 | to { 750 | opacity: 0; 751 | -webkit-transform: translate3d(-2000px, 0, 0); 752 | transform: translate3d(-2000px, 0, 0); 753 | } 754 | } 755 | @-webkit-keyframes fadeInRight { 756 | from { 757 | opacity: 0; 758 | -webkit-transform: translate3d(100%, 0, 0); 759 | transform: translate3d(100%, 0, 0); 760 | } 761 | to { 762 | opacity: 1; 763 | -webkit-transform: none; 764 | transform: none; 765 | } 766 | } 767 | @keyframes fadeInRight { 768 | from { 769 | opacity: 0; 770 | -webkit-transform: translate3d(100%, 0, 0); 771 | transform: translate3d(100%, 0, 0); 772 | } 773 | to { 774 | opacity: 1; 775 | -webkit-transform: none; 776 | transform: none; 777 | } 778 | } 779 | @-webkit-keyframes fadeOutRight { 780 | from { 781 | opacity: 1; 782 | } 783 | to { 784 | opacity: 0; 785 | -webkit-transform: translate3d(100%, 0, 0); 786 | transform: translate3d(100%, 0, 0); 787 | } 788 | } 789 | @keyframes fadeOutRight { 790 | from { 791 | opacity: 1; 792 | } 793 | to { 794 | opacity: 0; 795 | -webkit-transform: translate3d(100%, 0, 0); 796 | transform: translate3d(100%, 0, 0); 797 | } 798 | } 799 | @-webkit-keyframes fadeInRightBig { 800 | from { 801 | opacity: 0; 802 | -webkit-transform: translate3d(2000px, 0, 0); 803 | transform: translate3d(2000px, 0, 0); 804 | } 805 | to { 806 | opacity: 1; 807 | -webkit-transform: none; 808 | transform: none; 809 | } 810 | } 811 | @keyframes fadeInRightBig { 812 | from { 813 | opacity: 0; 814 | -webkit-transform: translate3d(2000px, 0, 0); 815 | transform: translate3d(2000px, 0, 0); 816 | } 817 | to { 818 | opacity: 1; 819 | -webkit-transform: none; 820 | transform: none; 821 | } 822 | } 823 | @-webkit-keyframes fadeOutRightBig { 824 | from { 825 | opacity: 1; 826 | } 827 | to { 828 | opacity: 0; 829 | -webkit-transform: translate3d(2000px, 0, 0); 830 | transform: translate3d(2000px, 0, 0); 831 | } 832 | } 833 | @keyframes fadeOutRightBig { 834 | from { 835 | opacity: 1; 836 | } 837 | to { 838 | opacity: 0; 839 | -webkit-transform: translate3d(2000px, 0, 0); 840 | transform: translate3d(2000px, 0, 0); 841 | } 842 | } 843 | @-webkit-keyframes fadeInUp { 844 | from { 845 | opacity: 0; 846 | -webkit-transform: translate3d(0, 100%, 0); 847 | transform: translate3d(0, 100%, 0); 848 | } 849 | to { 850 | opacity: 1; 851 | -webkit-transform: none; 852 | transform: none; 853 | } 854 | } 855 | @keyframes fadeInUp { 856 | from { 857 | opacity: 0; 858 | -webkit-transform: translate3d(0, 100%, 0); 859 | transform: translate3d(0, 100%, 0); 860 | } 861 | to { 862 | opacity: 1; 863 | -webkit-transform: none; 864 | transform: none; 865 | } 866 | } 867 | @-webkit-keyframes fadeOutUp { 868 | from { 869 | opacity: 1; 870 | } 871 | to { 872 | opacity: 0; 873 | -webkit-transform: translate3d(0, -100%, 0); 874 | transform: translate3d(0, -100%, 0); 875 | } 876 | } 877 | @keyframes fadeOutUp { 878 | from { 879 | opacity: 1; 880 | } 881 | to { 882 | opacity: 0; 883 | -webkit-transform: translate3d(0, -100%, 0); 884 | transform: translate3d(0, -100%, 0); 885 | } 886 | } 887 | @-webkit-keyframes fadeInUpBig { 888 | from { 889 | opacity: 0; 890 | -webkit-transform: translate3d(0, 2000px, 0); 891 | transform: translate3d(0, 2000px, 0); 892 | } 893 | to { 894 | opacity: 1; 895 | -webkit-transform: none; 896 | transform: none; 897 | } 898 | } 899 | @keyframes fadeInUpBig { 900 | from { 901 | opacity: 0; 902 | -webkit-transform: translate3d(0, 2000px, 0); 903 | transform: translate3d(0, 2000px, 0); 904 | } 905 | to { 906 | opacity: 1; 907 | -webkit-transform: none; 908 | transform: none; 909 | } 910 | } 911 | @keyframes fadeOutUp { 912 | from { 913 | opacity: 1; 914 | } 915 | to { 916 | opacity: 0; 917 | -webkit-transform: translate3d(0, -100%, 0); 918 | transform: translate3d(0, -100%, 0); 919 | } 920 | } 921 | .fade-transition, 922 | .fadeDown-transition, .fadeDownBig-transition, .fadeLeft-transition, .fadeLeftBig-transition, .fadeRight-transition, .fadeRightBig-transition, .fadeUp-transition, .fadeUpBig-transition { 923 | -webkit-animation-duration: 1s; 924 | animation-duration: 1s; 925 | -webkit-animation-fill-mode: both; 926 | animation-fill-mode: both; 927 | } 928 | .fade-enter, 929 | .fadeIn { 930 | -webkit-animation-name: fadeIn; 931 | animation-name: fadeIn; 932 | } 933 | .fade-leave, 934 | .fadeOut { 935 | -webkit-animation-name: fadeOut; 936 | animation-name: fadeOut; 937 | } 938 | .fadeUpBig-enter, 939 | .fadeInUpBig { 940 | -webkit-animation-name: fadeInUpBig; 941 | animation-name: fadeInUpBig; 942 | } 943 | .fadeUpBig-leave, 944 | .fadeOutUpBig { 945 | -webkit-animation-name: fadeOutUpBig; 946 | animation-name: fadeOutUpBig; 947 | } 948 | .fadeUp-enter, 949 | .fadeInUp { 950 | -webkit-animation-name: fadeInUp; 951 | animation-name: fadeInUp; 952 | } 953 | .fadeUp-leave, 954 | .fadeOutUp { 955 | -webkit-animation-name: fadeOutUp; 956 | animation-name: fadeOutUp; 957 | } 958 | .fadeRightBig-enter, 959 | .fadeInRightBig { 960 | -webkit-animation-name: fadeInRightBig; 961 | animation-name: fadeInRightBig; 962 | } 963 | .fadeRightBig-leave, 964 | .fadeOutRightBig { 965 | -webkit-animation-name: fadeOutRightBig; 966 | animation-name: fadeOutRightBig; 967 | } 968 | .fadeRight-enter, 969 | .fadeInRight { 970 | -webkit-animation-name: fadeInRight; 971 | animation-name: fadeInRight; 972 | } 973 | .fadeRight-leave, 974 | .fadeOutRight { 975 | -webkit-animation-name: fadeOutRight; 976 | animation-name: fadeOutRight; 977 | } 978 | .fadeLeftBig-enter, 979 | .fadeInLeftBig { 980 | -webkit-animation-name: fadeInLeftBig; 981 | animation-name: fadeInLeftBig; 982 | } 983 | .fadeLeftBig-leave, 984 | .fadeOutLeftBig { 985 | -webkit-animation-name: fadeOutLeftBig; 986 | animation-name: fadeOutLeftBig; 987 | } 988 | .fadeLeft-enter, 989 | .fadeInLeft { 990 | -webkit-animation-name: fadeInLeft; 991 | animation-name: fadeInLeft; 992 | } 993 | .fadeLeft-leave, 994 | .fadeOutLeft { 995 | -webkit-animation-name: fadeOutLeft; 996 | animation-name: fadeOutLeft; 997 | } 998 | .fadeDownBig-enter, 999 | .fadeInDownBig { 1000 | -webkit-animation-name: fadeInDownBig; 1001 | animation-name: fadeInDownBig; 1002 | } 1003 | .fadeDownBig-leave, 1004 | .fadeOutDownBig { 1005 | -webkit-animation-name: fadeOutDownBig; 1006 | animation-name: fadeOutDownBig; 1007 | } 1008 | .fadeDown-enter, 1009 | .fadeInDown { 1010 | -webkit-animation-name: fadeInDown; 1011 | animation-name: fadeInDown; 1012 | } 1013 | .fadeDown-leave, 1014 | .fadeOutDown { 1015 | -webkit-animation-name: fadeOutDown; 1016 | animation-name: fadeOutDown; 1017 | } 1018 | @-webkit-keyframes rotateIn { 1019 | from { 1020 | -webkit-transform-origin: center; 1021 | transform-origin: center; 1022 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 1023 | transform: rotate3d(0, 0, 1, -200deg); 1024 | opacity: 0; 1025 | } 1026 | to { 1027 | -webkit-transform-origin: center; 1028 | transform-origin: center; 1029 | -webkit-transform: none; 1030 | transform: none; 1031 | opacity: 1; 1032 | } 1033 | } 1034 | @keyframes rotateIn { 1035 | from { 1036 | -webkit-transform-origin: center; 1037 | transform-origin: center; 1038 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 1039 | transform: rotate3d(0, 0, 1, -200deg); 1040 | opacity: 0; 1041 | } 1042 | to { 1043 | -webkit-transform-origin: center; 1044 | transform-origin: center; 1045 | -webkit-transform: none; 1046 | transform: none; 1047 | opacity: 1; 1048 | } 1049 | } 1050 | @-webkit-keyframes rotateOut { 1051 | from { 1052 | -webkit-transform-origin: center; 1053 | transform-origin: center; 1054 | opacity: 1; 1055 | } 1056 | to { 1057 | -webkit-transform-origin: center; 1058 | transform-origin: center; 1059 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 1060 | transform: rotate3d(0, 0, 1, 200deg); 1061 | opacity: 0; 1062 | } 1063 | } 1064 | @keyframes rotateOut { 1065 | from { 1066 | -webkit-transform-origin: center; 1067 | transform-origin: center; 1068 | opacity: 1; 1069 | } 1070 | to { 1071 | -webkit-transform-origin: center; 1072 | transform-origin: center; 1073 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 1074 | transform: rotate3d(0, 0, 1, 200deg); 1075 | opacity: 0; 1076 | } 1077 | } 1078 | @-webkit-keyframes rotateInDownLeft { 1079 | from { 1080 | -webkit-transform-origin: left bottom; 1081 | transform-origin: left bottom; 1082 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 1083 | transform: rotate3d(0, 0, 1, -45deg); 1084 | opacity: 0; 1085 | } 1086 | to { 1087 | -webkit-transform-origin: left bottom; 1088 | transform-origin: left bottom; 1089 | -webkit-transform: none; 1090 | transform: none; 1091 | opacity: 1; 1092 | } 1093 | } 1094 | @keyframes rotateInDownLeft { 1095 | from { 1096 | -webkit-transform-origin: left bottom; 1097 | transform-origin: left bottom; 1098 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 1099 | transform: rotate3d(0, 0, 1, -45deg); 1100 | opacity: 0; 1101 | } 1102 | to { 1103 | -webkit-transform-origin: left bottom; 1104 | transform-origin: left bottom; 1105 | -webkit-transform: none; 1106 | transform: none; 1107 | opacity: 1; 1108 | } 1109 | } 1110 | @-webkit-keyframes rotateOutDownLeft { 1111 | from { 1112 | -webkit-transform-origin: left bottom; 1113 | transform-origin: left bottom; 1114 | opacity: 1; 1115 | } 1116 | to { 1117 | -webkit-transform-origin: left bottom; 1118 | transform-origin: left bottom; 1119 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 1120 | transform: rotate3d(0, 0, 1, 45deg); 1121 | opacity: 0; 1122 | } 1123 | } 1124 | @keyframes rotateOutDownLeft { 1125 | from { 1126 | -webkit-transform-origin: left bottom; 1127 | transform-origin: left bottom; 1128 | opacity: 1; 1129 | } 1130 | to { 1131 | -webkit-transform-origin: left bottom; 1132 | transform-origin: left bottom; 1133 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 1134 | transform: rotate3d(0, 0, 1, 45deg); 1135 | opacity: 0; 1136 | } 1137 | } 1138 | @-webkit-keyframes rotateInDownRight { 1139 | from { 1140 | -webkit-transform-origin: right bottom; 1141 | transform-origin: right bottom; 1142 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 1143 | transform: rotate3d(0, 0, 1, 45deg); 1144 | opacity: 0; 1145 | } 1146 | to { 1147 | -webkit-transform-origin: right bottom; 1148 | transform-origin: right bottom; 1149 | -webkit-transform: none; 1150 | transform: none; 1151 | opacity: 1; 1152 | } 1153 | } 1154 | @keyframes rotateInDownRight { 1155 | from { 1156 | -webkit-transform-origin: right bottom; 1157 | transform-origin: right bottom; 1158 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 1159 | transform: rotate3d(0, 0, 1, 45deg); 1160 | opacity: 0; 1161 | } 1162 | to { 1163 | -webkit-transform-origin: right bottom; 1164 | transform-origin: right bottom; 1165 | -webkit-transform: none; 1166 | transform: none; 1167 | opacity: 1; 1168 | } 1169 | } 1170 | @-webkit-keyframes rotateOutDownRight { 1171 | from { 1172 | -webkit-transform-origin: right bottom; 1173 | transform-origin: right bottom; 1174 | opacity: 1; 1175 | } 1176 | to { 1177 | -webkit-transform-origin: right bottom; 1178 | transform-origin: right bottom; 1179 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 1180 | transform: rotate3d(0, 0, 1, -45deg); 1181 | opacity: 0; 1182 | } 1183 | } 1184 | @keyframes rotateOutDownRight { 1185 | from { 1186 | -webkit-transform-origin: right bottom; 1187 | transform-origin: right bottom; 1188 | opacity: 1; 1189 | } 1190 | to { 1191 | -webkit-transform-origin: right bottom; 1192 | transform-origin: right bottom; 1193 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 1194 | transform: rotate3d(0, 0, 1, -45deg); 1195 | opacity: 0; 1196 | } 1197 | } 1198 | @-webkit-keyframes rotateInUpLeft { 1199 | from { 1200 | -webkit-transform-origin: left bottom; 1201 | transform-origin: left bottom; 1202 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 1203 | transform: rotate3d(0, 0, 1, 45deg); 1204 | opacity: 0; 1205 | } 1206 | to { 1207 | -webkit-transform-origin: left bottom; 1208 | transform-origin: left bottom; 1209 | -webkit-transform: none; 1210 | transform: none; 1211 | opacity: 1; 1212 | } 1213 | } 1214 | @keyframes rotateInUpLeft { 1215 | from { 1216 | -webkit-transform-origin: left bottom; 1217 | transform-origin: left bottom; 1218 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 1219 | transform: rotate3d(0, 0, 1, 45deg); 1220 | opacity: 0; 1221 | } 1222 | to { 1223 | -webkit-transform-origin: left bottom; 1224 | transform-origin: left bottom; 1225 | -webkit-transform: none; 1226 | transform: none; 1227 | opacity: 1; 1228 | } 1229 | } 1230 | @-webkit-keyframes rotateOutUpLeft { 1231 | from { 1232 | -webkit-transform-origin: left bottom; 1233 | transform-origin: left bottom; 1234 | opacity: 1; 1235 | } 1236 | to { 1237 | -webkit-transform-origin: left bottom; 1238 | transform-origin: left bottom; 1239 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 1240 | transform: rotate3d(0, 0, 1, -45deg); 1241 | opacity: 0; 1242 | } 1243 | } 1244 | @keyframes rotateOutUpLeft { 1245 | from { 1246 | -webkit-transform-origin: left bottom; 1247 | transform-origin: left bottom; 1248 | opacity: 1; 1249 | } 1250 | to { 1251 | -webkit-transform-origin: left bottom; 1252 | transform-origin: left bottom; 1253 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 1254 | transform: rotate3d(0, 0, 1, -45deg); 1255 | opacity: 0; 1256 | } 1257 | } 1258 | @-webkit-keyframes rotateInUpRight { 1259 | from { 1260 | -webkit-transform-origin: right bottom; 1261 | transform-origin: right bottom; 1262 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 1263 | transform: rotate3d(0, 0, 1, -90deg); 1264 | opacity: 0; 1265 | } 1266 | to { 1267 | -webkit-transform-origin: right bottom; 1268 | transform-origin: right bottom; 1269 | -webkit-transform: none; 1270 | transform: none; 1271 | opacity: 1; 1272 | } 1273 | } 1274 | @keyframes rotateInUpRight { 1275 | from { 1276 | -webkit-transform-origin: right bottom; 1277 | transform-origin: right bottom; 1278 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 1279 | transform: rotate3d(0, 0, 1, -90deg); 1280 | opacity: 0; 1281 | } 1282 | to { 1283 | -webkit-transform-origin: right bottom; 1284 | transform-origin: right bottom; 1285 | -webkit-transform: none; 1286 | transform: none; 1287 | opacity: 1; 1288 | } 1289 | } 1290 | @-webkit-keyframes rotateOutUpRight { 1291 | from { 1292 | -webkit-transform-origin: right bottom; 1293 | transform-origin: right bottom; 1294 | opacity: 1; 1295 | } 1296 | to { 1297 | -webkit-transform-origin: right bottom; 1298 | transform-origin: right bottom; 1299 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 1300 | transform: rotate3d(0, 0, 1, 90deg); 1301 | opacity: 0; 1302 | } 1303 | } 1304 | @keyframes rotateOutUpRight { 1305 | from { 1306 | -webkit-transform-origin: right bottom; 1307 | transform-origin: right bottom; 1308 | opacity: 1; 1309 | } 1310 | to { 1311 | -webkit-transform-origin: right bottom; 1312 | transform-origin: right bottom; 1313 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 1314 | transform: rotate3d(0, 0, 1, 90deg); 1315 | opacity: 0; 1316 | } 1317 | } 1318 | .rotate-transition, 1319 | .rotateDownLeft-transition, .rotateDownRight-transition, .rotateUpLeft-transition, .rotateUpRight-transition { 1320 | -webkit-animation-duration: 1s; 1321 | animation-duration: 1s; 1322 | -webkit-animation-fill-mode: both; 1323 | animation-fill-mode: both; 1324 | } 1325 | .rotate-enter, 1326 | .rotateIn { 1327 | -webkit-animation-name: rotateIn; 1328 | animation-name: rotateIn; 1329 | } 1330 | .rotate-leave, 1331 | .rotateOut { 1332 | -webkit-animation-name: rotateOut; 1333 | animation-name: rotateOut; 1334 | } 1335 | .rotateUpRight-enter, 1336 | .rotateInUpRight { 1337 | -webkit-animation-name: rotateInUpRight; 1338 | animation-name: rotateInUpRight; 1339 | } 1340 | .rotateUpRight-leave, 1341 | .rotateOutUpRight { 1342 | -webkit-animation-name: rotateOutUpRight; 1343 | animation-name: rotateOutUpRight; 1344 | } 1345 | .rotateUpLeft-enter, 1346 | .rotateInUpLeft { 1347 | -webkit-animation-name: rotateInUpLeft; 1348 | animation-name: rotateInUpLeft; 1349 | } 1350 | .rotateUpLeft-leave, 1351 | .rotateOutUpLeft { 1352 | -webkit-animation-name: rotateOutUpLeft; 1353 | animation-name: rotateOutUpLeft; 1354 | } 1355 | .rotateDownRight-enter, 1356 | .rotateInDownRight { 1357 | -webkit-animation-name: rotateInDownRight; 1358 | animation-name: rotateInDownRight; 1359 | } 1360 | .rotateDownRight-leave, 1361 | .rotateOutDownRight { 1362 | -webkit-animation-name: rotateOutDownRight; 1363 | animation-name: rotateOutDownRight; 1364 | } 1365 | .rotateDownLeft-enter, 1366 | .rotateInDownLeft { 1367 | -webkit-animation-name: rotateInDownLeft; 1368 | animation-name: rotateInDownLeft; 1369 | } 1370 | .rotateDownLeft-leave, 1371 | .rotateOutDownLeft { 1372 | -webkit-animation-name: rotateOutDownLeft; 1373 | animation-name: rotateOutDownLeft; 1374 | } 1375 | @-webkit-keyframes slideInDown { 1376 | from { 1377 | -webkit-transform: translate3d(0, -100%, 0); 1378 | transform: translate3d(0, -100%, 0); 1379 | visibility: visible; 1380 | } 1381 | to { 1382 | -webkit-transform: translate3d(0, 0, 0); 1383 | transform: translate3d(0, 0, 0); 1384 | } 1385 | } 1386 | @keyframes slideInDown { 1387 | from { 1388 | -webkit-transform: translate3d(0, -100%, 0); 1389 | transform: translate3d(0, -100%, 0); 1390 | visibility: visible; 1391 | } 1392 | to { 1393 | -webkit-transform: translate3d(0, 0, 0); 1394 | transform: translate3d(0, 0, 0); 1395 | } 1396 | } 1397 | @-webkit-keyframes slideOutDown { 1398 | from { 1399 | -webkit-transform: translate3d(0, 0, 0); 1400 | transform: translate3d(0, 0, 0); 1401 | } 1402 | to { 1403 | visibility: hidden; 1404 | -webkit-transform: translate3d(0, 100%, 0); 1405 | transform: translate3d(0, 100%, 0); 1406 | } 1407 | } 1408 | @keyframes slideOutDown { 1409 | from { 1410 | -webkit-transform: translate3d(0, 0, 0); 1411 | transform: translate3d(0, 0, 0); 1412 | } 1413 | to { 1414 | visibility: hidden; 1415 | -webkit-transform: translate3d(0, 100%, 0); 1416 | transform: translate3d(0, 100%, 0); 1417 | } 1418 | } 1419 | @-webkit-keyframes slideInLeft { 1420 | from { 1421 | -webkit-transform: translate3d(-100%, 0, 0); 1422 | transform: translate3d(-100%, 0, 0); 1423 | visibility: visible; 1424 | } 1425 | to { 1426 | -webkit-transform: translate3d(0, 0, 0); 1427 | transform: translate3d(0, 0, 0); 1428 | } 1429 | } 1430 | @keyframes slideInLeft { 1431 | from { 1432 | -webkit-transform: translate3d(-100%, 0, 0); 1433 | transform: translate3d(-100%, 0, 0); 1434 | visibility: visible; 1435 | } 1436 | to { 1437 | -webkit-transform: translate3d(0, 0, 0); 1438 | transform: translate3d(0, 0, 0); 1439 | } 1440 | } 1441 | @-webkit-keyframes slideOutLeft { 1442 | from { 1443 | -webkit-transform: translate3d(0, 0, 0); 1444 | transform: translate3d(0, 0, 0); 1445 | } 1446 | to { 1447 | visibility: hidden; 1448 | -webkit-transform: translate3d(-100%, 0, 0); 1449 | transform: translate3d(-100%, 0, 0); 1450 | } 1451 | } 1452 | @keyframes slideOutLeft { 1453 | from { 1454 | -webkit-transform: translate3d(0, 0, 0); 1455 | transform: translate3d(0, 0, 0); 1456 | } 1457 | to { 1458 | visibility: hidden; 1459 | -webkit-transform: translate3d(-100%, 0, 0); 1460 | transform: translate3d(-100%, 0, 0); 1461 | } 1462 | } 1463 | @-webkit-keyframes slideInRight { 1464 | from { 1465 | -webkit-transform: translate3d(100%, 0, 0); 1466 | transform: translate3d(100%, 0, 0); 1467 | visibility: visible; 1468 | } 1469 | to { 1470 | -webkit-transform: translate3d(0, 0, 0); 1471 | transform: translate3d(0, 0, 0); 1472 | } 1473 | } 1474 | @keyframes slideInRight { 1475 | from { 1476 | -webkit-transform: translate3d(100%, 0, 0); 1477 | transform: translate3d(100%, 0, 0); 1478 | visibility: visible; 1479 | } 1480 | to { 1481 | -webkit-transform: translate3d(0, 0, 0); 1482 | transform: translate3d(0, 0, 0); 1483 | } 1484 | } 1485 | @-webkit-keyframes slideOutRight { 1486 | from { 1487 | -webkit-transform: translate3d(0, 0, 0); 1488 | transform: translate3d(0, 0, 0); 1489 | } 1490 | to { 1491 | visibility: hidden; 1492 | -webkit-transform: translate3d(100%, 0, 0); 1493 | transform: translate3d(100%, 0, 0); 1494 | } 1495 | } 1496 | @keyframes slideOutRight { 1497 | from { 1498 | -webkit-transform: translate3d(0, 0, 0); 1499 | transform: translate3d(0, 0, 0); 1500 | } 1501 | to { 1502 | visibility: hidden; 1503 | -webkit-transform: translate3d(100%, 0, 0); 1504 | transform: translate3d(100%, 0, 0); 1505 | } 1506 | } 1507 | @-webkit-keyframes slideInUp { 1508 | from { 1509 | -webkit-transform: translate3d(0, 100%, 0); 1510 | transform: translate3d(0, 100%, 0); 1511 | visibility: visible; 1512 | } 1513 | to { 1514 | -webkit-transform: translate3d(0, 0, 0); 1515 | transform: translate3d(0, 0, 0); 1516 | } 1517 | } 1518 | @keyframes slideInUp { 1519 | from { 1520 | -webkit-transform: translate3d(0, 100%, 0); 1521 | transform: translate3d(0, 100%, 0); 1522 | visibility: visible; 1523 | } 1524 | to { 1525 | -webkit-transform: translate3d(0, 0, 0); 1526 | transform: translate3d(0, 0, 0); 1527 | } 1528 | } 1529 | @-webkit-keyframes slideOutUp { 1530 | from { 1531 | -webkit-transform: translate3d(0, 0, 0); 1532 | transform: translate3d(0, 0, 0); 1533 | } 1534 | to { 1535 | visibility: hidden; 1536 | -webkit-transform: translate3d(0, -100%, 0); 1537 | transform: translate3d(0, -100%, 0); 1538 | } 1539 | } 1540 | @keyframes slideOutUp { 1541 | from { 1542 | -webkit-transform: translate3d(0, 0, 0); 1543 | transform: translate3d(0, 0, 0); 1544 | } 1545 | to { 1546 | visibility: hidden; 1547 | -webkit-transform: translate3d(0, -100%, 0); 1548 | transform: translate3d(0, -100%, 0); 1549 | } 1550 | } 1551 | .slide-transition, 1552 | .slideDown-transition, .slideLeft-transition, .slideRight-transition, .slideUp-transition { 1553 | -webkit-animation-duration: 1s; 1554 | animation-duration: 1s; 1555 | -webkit-animation-fill-mode: both; 1556 | animation-fill-mode: both; 1557 | } 1558 | .slide-enter, 1559 | .slideIn { 1560 | -webkit-animation-name: slideIn; 1561 | animation-name: slideIn; 1562 | } 1563 | .slide-leave, 1564 | .slideOut { 1565 | -webkit-animation-name: slideOut; 1566 | animation-name: slideOut; 1567 | } 1568 | .slideUp-enter, 1569 | .slideInUp { 1570 | -webkit-animation-name: slideInUp; 1571 | animation-name: slideInUp; 1572 | } 1573 | .slideUp-leave, 1574 | .slideOutUp { 1575 | -webkit-animation-name: slideOutUp; 1576 | animation-name: slideOutUp; 1577 | } 1578 | .slideRight-enter, 1579 | .slideInRight { 1580 | -webkit-animation-name: slideInRight; 1581 | animation-name: slideInRight; 1582 | } 1583 | .slideRight-leave, 1584 | .slideOutRight { 1585 | -webkit-animation-name: slideOutRight; 1586 | animation-name: slideOutRight; 1587 | } 1588 | .slideLeft-enter, 1589 | .slideInLeft { 1590 | -webkit-animation-name: slideInLeft; 1591 | animation-name: slideInLeft; 1592 | } 1593 | .slideLeft-leave, 1594 | .slideOutLeft { 1595 | -webkit-animation-name: slideOutLeft; 1596 | animation-name: slideOutLeft; 1597 | } 1598 | .slideDown-enter, 1599 | .slideInDown { 1600 | -webkit-animation-name: slideInDown; 1601 | animation-name: slideInDown; 1602 | } 1603 | .slideDown-leave, 1604 | .slideOutDown { 1605 | -webkit-animation-name: slideOutDown; 1606 | animation-name: slideOutDown; 1607 | } 1608 | @-webkit-keyframes zoomIn { 1609 | from { 1610 | opacity: 0; 1611 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 1612 | transform: scale3d(0.3, 0.3, 0.3); 1613 | } 1614 | 50% { 1615 | opacity: 1; 1616 | } 1617 | } 1618 | @keyframes zoomIn { 1619 | from { 1620 | opacity: 0; 1621 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 1622 | transform: scale3d(0.3, 0.3, 0.3); 1623 | } 1624 | 50% { 1625 | opacity: 1; 1626 | } 1627 | } 1628 | @-webkit-keyframes zoomOut { 1629 | from { 1630 | opacity: 1; 1631 | } 1632 | 50% { 1633 | opacity: 0; 1634 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 1635 | transform: scale3d(0.3, 0.3, 0.3); 1636 | } 1637 | to { 1638 | opacity: 0; 1639 | } 1640 | } 1641 | @keyframes zoomOut { 1642 | from { 1643 | opacity: 1; 1644 | } 1645 | 50% { 1646 | opacity: 0; 1647 | -webkit-transform: scale3d(0.3, 0.3, 0.3); 1648 | transform: scale3d(0.3, 0.3, 0.3); 1649 | } 1650 | to { 1651 | opacity: 0; 1652 | } 1653 | } 1654 | @-webkit-keyframes zoomInDown { 1655 | from { 1656 | opacity: 0; 1657 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); 1658 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); 1659 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1660 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1661 | } 1662 | 60% { 1663 | opacity: 1; 1664 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 1665 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 1666 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1667 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1668 | } 1669 | } 1670 | @keyframes zoomInDown { 1671 | from { 1672 | opacity: 0; 1673 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); 1674 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); 1675 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1676 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1677 | } 1678 | 60% { 1679 | opacity: 1; 1680 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 1681 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 1682 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1683 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1684 | } 1685 | } 1686 | @-webkit-keyframes zoomOutDown { 1687 | 40% { 1688 | opacity: 1; 1689 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 1690 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 1691 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1692 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1693 | } 1694 | to { 1695 | opacity: 0; 1696 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); 1697 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); 1698 | -webkit-transform-origin: center bottom; 1699 | transform-origin: center bottom; 1700 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1701 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1702 | } 1703 | } 1704 | @keyframes zoomOutDown { 1705 | 40% { 1706 | opacity: 1; 1707 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 1708 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 1709 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1710 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1711 | } 1712 | to { 1713 | opacity: 0; 1714 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); 1715 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); 1716 | -webkit-transform-origin: center bottom; 1717 | transform-origin: center bottom; 1718 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1719 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1720 | } 1721 | } 1722 | @-webkit-keyframes zoomInLeft { 1723 | from { 1724 | opacity: 0; 1725 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); 1726 | transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); 1727 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1728 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1729 | } 1730 | 60% { 1731 | opacity: 1; 1732 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); 1733 | transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); 1734 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1735 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1736 | } 1737 | } 1738 | @keyframes zoomInLeft { 1739 | from { 1740 | opacity: 0; 1741 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); 1742 | transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); 1743 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1744 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1745 | } 1746 | 60% { 1747 | opacity: 1; 1748 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); 1749 | transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); 1750 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1751 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1752 | } 1753 | } 1754 | @-webkit-keyframes zoomOutLeft { 1755 | 40% { 1756 | opacity: 1; 1757 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); 1758 | transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); 1759 | } 1760 | to { 1761 | opacity: 0; 1762 | -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); 1763 | transform: scale(0.1) translate3d(-2000px, 0, 0); 1764 | -webkit-transform-origin: left center; 1765 | transform-origin: left center; 1766 | } 1767 | } 1768 | @keyframes zoomOutLeft { 1769 | 40% { 1770 | opacity: 1; 1771 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); 1772 | transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); 1773 | } 1774 | to { 1775 | opacity: 0; 1776 | -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); 1777 | transform: scale(0.1) translate3d(-2000px, 0, 0); 1778 | -webkit-transform-origin: left center; 1779 | transform-origin: left center; 1780 | } 1781 | } 1782 | @-webkit-keyframes zoomInRight { 1783 | from { 1784 | opacity: 0; 1785 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); 1786 | transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); 1787 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1788 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1789 | } 1790 | 60% { 1791 | opacity: 1; 1792 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); 1793 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); 1794 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1795 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1796 | } 1797 | } 1798 | @keyframes zoomInRight { 1799 | from { 1800 | opacity: 0; 1801 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); 1802 | transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); 1803 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1804 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1805 | } 1806 | 60% { 1807 | opacity: 1; 1808 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); 1809 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); 1810 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1811 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1812 | } 1813 | } 1814 | @-webkit-keyframes zoomOutRight { 1815 | 40% { 1816 | opacity: 1; 1817 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); 1818 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); 1819 | } 1820 | to { 1821 | opacity: 0; 1822 | -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); 1823 | transform: scale(0.1) translate3d(2000px, 0, 0); 1824 | -webkit-transform-origin: right center; 1825 | transform-origin: right center; 1826 | } 1827 | } 1828 | @keyframes zoomOutRight { 1829 | 40% { 1830 | opacity: 1; 1831 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); 1832 | transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); 1833 | } 1834 | to { 1835 | opacity: 0; 1836 | -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); 1837 | transform: scale(0.1) translate3d(2000px, 0, 0); 1838 | -webkit-transform-origin: right center; 1839 | transform-origin: right center; 1840 | } 1841 | } 1842 | @-webkit-keyframes zoomInUp { 1843 | from { 1844 | opacity: 0; 1845 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); 1846 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); 1847 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1848 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1849 | } 1850 | 60% { 1851 | opacity: 1; 1852 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 1853 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 1854 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1855 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1856 | } 1857 | } 1858 | @keyframes zoomInUp { 1859 | from { 1860 | opacity: 0; 1861 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); 1862 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); 1863 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1864 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1865 | } 1866 | 60% { 1867 | opacity: 1; 1868 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 1869 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); 1870 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1871 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1872 | } 1873 | } 1874 | @-webkit-keyframes zoomOutUp { 1875 | 40% { 1876 | opacity: 1; 1877 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 1878 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 1879 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1880 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1881 | } 1882 | to { 1883 | opacity: 0; 1884 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); 1885 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); 1886 | -webkit-transform-origin: center bottom; 1887 | transform-origin: center bottom; 1888 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1889 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1890 | } 1891 | } 1892 | @keyframes zoomOutUp { 1893 | 40% { 1894 | opacity: 1; 1895 | -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 1896 | transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); 1897 | -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1898 | animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 1899 | } 1900 | to { 1901 | opacity: 0; 1902 | -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); 1903 | transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); 1904 | -webkit-transform-origin: center bottom; 1905 | transform-origin: center bottom; 1906 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1907 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); 1908 | } 1909 | } 1910 | .zoom-transition, 1911 | .zoomDown-transition, .zoomLeft-transition, .zoomRight-transition, .zoomUp-transition { 1912 | -webkit-animation-duration: 1s; 1913 | animation-duration: 1s; 1914 | -webkit-animation-fill-mode: both; 1915 | animation-fill-mode: both; 1916 | } 1917 | .zoom-enter, 1918 | .zoomIn { 1919 | -webkit-animation-name: zoomIn; 1920 | animation-name: zoomIn; 1921 | } 1922 | .zoom-leave, 1923 | .zoomOut { 1924 | -webkit-animation-name: zoomOut; 1925 | animation-name: zoomOut; 1926 | } 1927 | .zoomUp-enter, 1928 | .zoomInUp { 1929 | -webkit-animation-name: zoomInUp; 1930 | animation-name: zoomInUp; 1931 | } 1932 | .zoomUp-leave, 1933 | .zoomOutUp { 1934 | -webkit-animation-name: zoomOutUp; 1935 | animation-name: zoomOutUp; 1936 | } 1937 | .zoomRight-enter, 1938 | .zoomInRight { 1939 | -webkit-animation-name: zoomInRight; 1940 | animation-name: zoomInRight; 1941 | } 1942 | .zoomRight-leave, 1943 | .zoomOutRight { 1944 | -webkit-animation-name: zoomOutRight; 1945 | animation-name: zoomOutRight; 1946 | } 1947 | .zoomLeft-enter, 1948 | .zoomInLeft { 1949 | -webkit-animation-name: zoomInLeft; 1950 | animation-name: zoomInLeft; 1951 | } 1952 | .zoomLeft-leave, 1953 | .zoomOutLeft { 1954 | -webkit-animation-name: zoomOutLeft; 1955 | animation-name: zoomOutLeft; 1956 | } 1957 | .zoomDown-enter, 1958 | .zoomInDown { 1959 | -webkit-animation-name: zoomInDown; 1960 | animation-name: zoomInDown; 1961 | } 1962 | .zoomDown-leave, 1963 | .zoomOutDown { 1964 | -webkit-animation-name: zoomOutDown; 1965 | animation-name: zoomOutDown; 1966 | } 1967 | --------------------------------------------------------------------------------