Created
April 11, 2018 22:59
-
-
Save brandonmp/9d0e5682ab08efd466c9db99413e7567 to your computer and use it in GitHub Desktop.
animation css extracted from antd react
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Even though we import all styles/js modularly, these | |
| * global animation-related styles don't make it, so we add them separately. */ | |
| .move-up-appear, | |
| .move-up-enter, | |
| .move-up-leave { | |
| -webkit-animation-duration: .2s; | |
| animation-duration: .2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .move-up-appear.move-up-appear-active, | |
| .move-up-enter.move-up-enter-active { | |
| -webkit-animation-name: antMoveUpIn; | |
| animation-name: antMoveUpIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .move-up-leave.move-up-leave-active { | |
| -webkit-animation-name: antMoveUpOut; | |
| animation-name: antMoveUpOut; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .move-up-appear, | |
| .move-up-enter { | |
| opacity: 0; | |
| -webkit-animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| } | |
| .move-up-leave { | |
| -webkit-animation-timing-function: cubic-bezier(.6, .04, .98, .34); | |
| animation-timing-function: cubic-bezier(.6, .04, .98, .34); | |
| } | |
| .move-down-appear, | |
| .move-down-enter, | |
| .move-down-leave { | |
| -webkit-animation-duration: .2s; | |
| animation-duration: .2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .move-down-appear.move-down-appear-active, | |
| .move-down-enter.move-down-enter-active { | |
| -webkit-animation-name: antMoveDownIn; | |
| animation-name: antMoveDownIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .move-down-leave.move-down-leave-active { | |
| -webkit-animation-name: antMoveDownOut; | |
| animation-name: antMoveDownOut; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .move-down-appear, | |
| .move-down-enter { | |
| opacity: 0; | |
| -webkit-animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| } | |
| .move-down-leave { | |
| -webkit-animation-timing-function: cubic-bezier(.6, .04, .98, .34); | |
| animation-timing-function: cubic-bezier(.6, .04, .98, .34); | |
| } | |
| .move-left-appear, | |
| .move-left-enter, | |
| .move-left-leave { | |
| -webkit-animation-duration: .2s; | |
| animation-duration: .2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .move-left-appear.move-left-appear-active, | |
| .move-left-enter.move-left-enter-active { | |
| -webkit-animation-name: antMoveLeftIn; | |
| animation-name: antMoveLeftIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .move-left-leave.move-left-leave-active { | |
| -webkit-animation-name: antMoveLeftOut; | |
| animation-name: antMoveLeftOut; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .move-left-appear, | |
| .move-left-enter { | |
| opacity: 0; | |
| -webkit-animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| } | |
| .move-left-leave { | |
| -webkit-animation-timing-function: cubic-bezier(.6, .04, .98, .34); | |
| animation-timing-function: cubic-bezier(.6, .04, .98, .34); | |
| } | |
| .move-right-appear, | |
| .move-right-enter, | |
| .move-right-leave { | |
| -webkit-animation-duration: .2s; | |
| animation-duration: .2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .move-right-appear.move-right-appear-active, | |
| .move-right-enter.move-right-enter-active { | |
| -webkit-animation-name: antMoveRightIn; | |
| animation-name: antMoveRightIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .move-right-leave.move-right-leave-active { | |
| -webkit-animation-name: antMoveRightOut; | |
| animation-name: antMoveRightOut; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .move-right-appear, | |
| .move-right-enter { | |
| opacity: 0; | |
| -webkit-animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| } | |
| .move-right-leave { | |
| -webkit-animation-timing-function: cubic-bezier(.6, .04, .98, .34); | |
| animation-timing-function: cubic-bezier(.6, .04, .98, .34); | |
| } | |
| @-webkit-keyframes antMoveDownIn { | |
| 0% { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateY(100%); | |
| transform: translateY(100%); | |
| opacity: 0; | |
| } | |
| to { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes antMoveDownIn { | |
| 0% { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateY(100%); | |
| transform: translateY(100%); | |
| opacity: 0; | |
| } | |
| to { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| @-webkit-keyframes antMoveDownOut { | |
| 0% { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| to { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateY(100%); | |
| transform: translateY(100%); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes antMoveDownOut { | |
| 0% { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| to { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateY(100%); | |
| transform: translateY(100%); | |
| opacity: 0; | |
| } | |
| } | |
| @-webkit-keyframes antMoveLeftIn { | |
| 0% { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateX(-100%); | |
| transform: translateX(-100%); | |
| opacity: 0; | |
| } | |
| to { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes antMoveLeftIn { | |
| 0% { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateX(-100%); | |
| transform: translateX(-100%); | |
| opacity: 0; | |
| } | |
| to { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| @-webkit-keyframes antMoveLeftOut { | |
| 0% { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| to { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateX(-100%); | |
| transform: translateX(-100%); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes antMoveLeftOut { | |
| 0% { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| to { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateX(-100%); | |
| transform: translateX(-100%); | |
| opacity: 0; | |
| } | |
| } | |
| @-webkit-keyframes antMoveRightIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateX(100%); | |
| transform: translateX(100%); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes antMoveRightIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateX(100%); | |
| transform: translateX(100%); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| } | |
| } | |
| @-webkit-keyframes antMoveRightOut { | |
| 0% { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| to { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateX(100%); | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes antMoveRightOut { | |
| 0% { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| to { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateX(100%); | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| } | |
| @-webkit-keyframes antMoveUpIn { | |
| 0% { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateY(-100%); | |
| transform: translateY(-100%); | |
| opacity: 0; | |
| } | |
| to { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes antMoveUpIn { | |
| 0% { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateY(-100%); | |
| transform: translateY(-100%); | |
| opacity: 0; | |
| } | |
| to { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| @-webkit-keyframes antMoveUpOut { | |
| 0% { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| to { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateY(-100%); | |
| transform: translateY(-100%); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes antMoveUpOut { | |
| 0% { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateY(0); | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| to { | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: translateY(-100%); | |
| transform: translateY(-100%); | |
| opacity: 0; | |
| } | |
| } | |
| @-webkit-keyframes loadingCircle { | |
| 0% { | |
| -webkit-transform-origin: 50% 50%; | |
| transform-origin: 50% 50%; | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| -webkit-transform-origin: 50% 50%; | |
| transform-origin: 50% 50%; | |
| -webkit-transform: rotate(1turn); | |
| transform: rotate(1turn); | |
| } | |
| } | |
| @keyframes loadingCircle { | |
| 0% { | |
| -webkit-transform-origin: 50% 50%; | |
| transform-origin: 50% 50%; | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| -webkit-transform-origin: 50% 50%; | |
| transform-origin: 50% 50%; | |
| -webkit-transform: rotate(1turn); | |
| transform: rotate(1turn); | |
| } | |
| } | |
| .slide-up-appear, | |
| .slide-up-enter, | |
| .slide-up-leave { | |
| -webkit-animation-duration: .2s; | |
| animation-duration: .2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .slide-up-appear.slide-up-appear-active, | |
| .slide-up-enter.slide-up-enter-active { | |
| -webkit-animation-name: antSlideUpIn; | |
| animation-name: antSlideUpIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .slide-up-leave.slide-up-leave-active { | |
| -webkit-animation-name: antSlideUpOut; | |
| animation-name: antSlideUpOut; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .slide-up-appear, | |
| .slide-up-enter { | |
| opacity: 0; | |
| -webkit-animation-timing-function: cubic-bezier(.23, 1, .32, 1); | |
| animation-timing-function: cubic-bezier(.23, 1, .32, 1); | |
| } | |
| .slide-up-leave { | |
| -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); | |
| animation-timing-function: cubic-bezier(.755, .05, .855, .06); | |
| } | |
| .slide-down-appear, | |
| .slide-down-enter, | |
| .slide-down-leave { | |
| -webkit-animation-duration: .2s; | |
| animation-duration: .2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .slide-down-appear.slide-down-appear-active, | |
| .slide-down-enter.slide-down-enter-active { | |
| -webkit-animation-name: antSlideDownIn; | |
| animation-name: antSlideDownIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .slide-down-leave.slide-down-leave-active { | |
| -webkit-animation-name: antSlideDownOut; | |
| animation-name: antSlideDownOut; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .slide-down-appear, | |
| .slide-down-enter { | |
| opacity: 0; | |
| -webkit-animation-timing-function: cubic-bezier(.23, 1, .32, 1); | |
| animation-timing-function: cubic-bezier(.23, 1, .32, 1); | |
| } | |
| .slide-down-leave { | |
| -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); | |
| animation-timing-function: cubic-bezier(.755, .05, .855, .06); | |
| } | |
| .slide-left-appear, | |
| .slide-left-enter, | |
| .slide-left-leave { | |
| -webkit-animation-duration: .2s; | |
| animation-duration: .2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .slide-left-appear.slide-left-appear-active, | |
| .slide-left-enter.slide-left-enter-active { | |
| -webkit-animation-name: antSlideLeftIn; | |
| animation-name: antSlideLeftIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .slide-left-leave.slide-left-leave-active { | |
| -webkit-animation-name: antSlideLeftOut; | |
| animation-name: antSlideLeftOut; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .slide-left-appear, | |
| .slide-left-enter { | |
| opacity: 0; | |
| -webkit-animation-timing-function: cubic-bezier(.23, 1, .32, 1); | |
| animation-timing-function: cubic-bezier(.23, 1, .32, 1); | |
| } | |
| .slide-left-leave { | |
| -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); | |
| animation-timing-function: cubic-bezier(.755, .05, .855, .06); | |
| } | |
| .slide-right-appear, | |
| .slide-right-enter, | |
| .slide-right-leave { | |
| -webkit-animation-duration: .2s; | |
| animation-duration: .2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .slide-right-appear.slide-right-appear-active, | |
| .slide-right-enter.slide-right-enter-active { | |
| -webkit-animation-name: antSlideRightIn; | |
| animation-name: antSlideRightIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .slide-right-leave.slide-right-leave-active { | |
| -webkit-animation-name: antSlideRightOut; | |
| animation-name: antSlideRightOut; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .slide-right-appear, | |
| .slide-right-enter { | |
| opacity: 0; | |
| -webkit-animation-timing-function: cubic-bezier(.23, 1, .32, 1); | |
| animation-timing-function: cubic-bezier(.23, 1, .32, 1); | |
| } | |
| .slide-right-leave { | |
| -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06); | |
| animation-timing-function: cubic-bezier(.755, .05, .855, .06); | |
| } | |
| @-webkit-keyframes antSlideUpIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scaleY(.8); | |
| transform: scaleY(.8); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| } | |
| } | |
| @keyframes antSlideUpIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scaleY(.8); | |
| transform: scaleY(.8); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| } | |
| } | |
| @-webkit-keyframes antSlideUpOut { | |
| 0% { | |
| opacity: 1; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scaleY(.8); | |
| transform: scaleY(.8); | |
| } | |
| } | |
| @keyframes antSlideUpOut { | |
| 0% { | |
| opacity: 1; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scaleY(.8); | |
| transform: scaleY(.8); | |
| } | |
| } | |
| @-webkit-keyframes antSlideDownIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 100% 100%; | |
| transform-origin: 100% 100%; | |
| -webkit-transform: scaleY(.8); | |
| transform: scaleY(.8); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform-origin: 100% 100%; | |
| transform-origin: 100% 100%; | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| } | |
| } | |
| @keyframes antSlideDownIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 100% 100%; | |
| transform-origin: 100% 100%; | |
| -webkit-transform: scaleY(.8); | |
| transform: scaleY(.8); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform-origin: 100% 100%; | |
| transform-origin: 100% 100%; | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| } | |
| } | |
| @-webkit-keyframes antSlideDownOut { | |
| 0% { | |
| opacity: 1; | |
| -webkit-transform-origin: 100% 100%; | |
| transform-origin: 100% 100%; | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform-origin: 100% 100%; | |
| transform-origin: 100% 100%; | |
| -webkit-transform: scaleY(.8); | |
| transform: scaleY(.8); | |
| } | |
| } | |
| @keyframes antSlideDownOut { | |
| 0% { | |
| opacity: 1; | |
| -webkit-transform-origin: 100% 100%; | |
| transform-origin: 100% 100%; | |
| -webkit-transform: scaleY(1); | |
| transform: scaleY(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform-origin: 100% 100%; | |
| transform-origin: 100% 100%; | |
| -webkit-transform: scaleY(.8); | |
| transform: scaleY(.8); | |
| } | |
| } | |
| @-webkit-keyframes antSlideLeftIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scaleX(.8); | |
| transform: scaleX(.8); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scaleX(1); | |
| transform: scaleX(1); | |
| } | |
| } | |
| @keyframes antSlideLeftIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scaleX(.8); | |
| transform: scaleX(.8); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scaleX(1); | |
| transform: scaleX(1); | |
| } | |
| } | |
| @-webkit-keyframes antSlideLeftOut { | |
| 0% { | |
| opacity: 1; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scaleX(1); | |
| transform: scaleX(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scaleX(.8); | |
| transform: scaleX(.8); | |
| } | |
| } | |
| @keyframes antSlideLeftOut { | |
| 0% { | |
| opacity: 1; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scaleX(1); | |
| transform: scaleX(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform-origin: 0 0; | |
| transform-origin: 0 0; | |
| -webkit-transform: scaleX(.8); | |
| transform: scaleX(.8); | |
| } | |
| } | |
| @-webkit-keyframes antSlideRightIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 100% 0; | |
| transform-origin: 100% 0; | |
| -webkit-transform: scaleX(.8); | |
| transform: scaleX(.8); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform-origin: 100% 0; | |
| transform-origin: 100% 0; | |
| -webkit-transform: scaleX(1); | |
| transform: scaleX(1); | |
| } | |
| } | |
| @keyframes antSlideRightIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 100% 0; | |
| transform-origin: 100% 0; | |
| -webkit-transform: scaleX(.8); | |
| transform: scaleX(.8); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform-origin: 100% 0; | |
| transform-origin: 100% 0; | |
| -webkit-transform: scaleX(1); | |
| transform: scaleX(1); | |
| } | |
| } | |
| @-webkit-keyframes antSlideRightOut { | |
| 0% { | |
| opacity: 1; | |
| -webkit-transform-origin: 100% 0; | |
| transform-origin: 100% 0; | |
| -webkit-transform: scaleX(1); | |
| transform: scaleX(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform-origin: 100% 0; | |
| transform-origin: 100% 0; | |
| -webkit-transform: scaleX(.8); | |
| transform: scaleX(.8); | |
| } | |
| } | |
| @keyframes antSlideRightOut { | |
| 0% { | |
| opacity: 1; | |
| -webkit-transform-origin: 100% 0; | |
| transform-origin: 100% 0; | |
| -webkit-transform: scaleX(1); | |
| transform: scaleX(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform-origin: 100% 0; | |
| transform-origin: 100% 0; | |
| -webkit-transform: scaleX(.8); | |
| transform: scaleX(.8); | |
| } | |
| } | |
| .swing-appear, | |
| .swing-enter { | |
| -webkit-animation-duration: .2s; | |
| animation-duration: .2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .swing-appear.swing-appear-active, | |
| .swing-enter.swing-enter-active { | |
| -webkit-animation-name: antSwingIn; | |
| animation-name: antSwingIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| @-webkit-keyframes antSwingIn { | |
| 0%, | |
| to { | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| } | |
| 20% { | |
| -webkit-transform: translateX(-10px); | |
| transform: translateX(-10px); | |
| } | |
| 40% { | |
| -webkit-transform: translateX(10px); | |
| transform: translateX(10px); | |
| } | |
| 60% { | |
| -webkit-transform: translateX(-5px); | |
| transform: translateX(-5px); | |
| } | |
| 80% { | |
| -webkit-transform: translateX(5px); | |
| transform: translateX(5px); | |
| } | |
| } | |
| @keyframes antSwingIn { | |
| 0%, | |
| to { | |
| -webkit-transform: translateX(0); | |
| transform: translateX(0); | |
| } | |
| 20% { | |
| -webkit-transform: translateX(-10px); | |
| transform: translateX(-10px); | |
| } | |
| 40% { | |
| -webkit-transform: translateX(10px); | |
| transform: translateX(10px); | |
| } | |
| 60% { | |
| -webkit-transform: translateX(-5px); | |
| transform: translateX(-5px); | |
| } | |
| 80% { | |
| -webkit-transform: translateX(5px); | |
| transform: translateX(5px); | |
| } | |
| } | |
| .zoom-appear, | |
| .zoom-enter, | |
| .zoom-leave { | |
| -webkit-animation-duration: .2s; | |
| animation-duration: .2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .zoom-appear.zoom-appear-active, | |
| .zoom-enter.zoom-enter-active { | |
| -webkit-animation-name: antZoomIn; | |
| animation-name: antZoomIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .zoom-leave.zoom-leave-active { | |
| -webkit-animation-name: antZoomOut; | |
| animation-name: antZoomOut; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .zoom-appear, | |
| .zoom-enter { | |
| -webkit-transform: scale(0); | |
| -ms-transform: scale(0); | |
| transform: scale(0); | |
| -webkit-animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| } | |
| .zoom-leave { | |
| -webkit-animation-timing-function: cubic-bezier(.78, .14, .15, .86); | |
| animation-timing-function: cubic-bezier(.78, .14, .15, .86); | |
| } | |
| .zoom-big-appear, | |
| .zoom-big-enter, | |
| .zoom-big-leave { | |
| -webkit-animation-duration: .2s; | |
| animation-duration: .2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .zoom-big-appear.zoom-big-appear-active, | |
| .zoom-big-enter.zoom-big-enter-active { | |
| -webkit-animation-name: antZoomBigIn; | |
| animation-name: antZoomBigIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .zoom-big-leave.zoom-big-leave-active { | |
| -webkit-animation-name: antZoomBigOut; | |
| animation-name: antZoomBigOut; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .zoom-big-appear, | |
| .zoom-big-enter { | |
| -webkit-transform: scale(0); | |
| -ms-transform: scale(0); | |
| transform: scale(0); | |
| -webkit-animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| } | |
| .zoom-big-leave { | |
| -webkit-animation-timing-function: cubic-bezier(.78, .14, .15, .86); | |
| animation-timing-function: cubic-bezier(.78, .14, .15, .86); | |
| } | |
| .zoom-big-fast-appear, | |
| .zoom-big-fast-enter, | |
| .zoom-big-fast-leave { | |
| -webkit-animation-duration: .1s; | |
| animation-duration: .1s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .zoom-big-fast-appear.zoom-big-fast-appear-active, | |
| .zoom-big-fast-enter.zoom-big-fast-enter-active { | |
| -webkit-animation-name: antZoomBigIn; | |
| animation-name: antZoomBigIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .zoom-big-fast-leave.zoom-big-fast-leave-active { | |
| -webkit-animation-name: antZoomBigOut; | |
| animation-name: antZoomBigOut; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .zoom-big-fast-appear, | |
| .zoom-big-fast-enter { | |
| -webkit-transform: scale(0); | |
| -ms-transform: scale(0); | |
| transform: scale(0); | |
| -webkit-animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| } | |
| .zoom-big-fast-leave { | |
| -webkit-animation-timing-function: cubic-bezier(.78, .14, .15, .86); | |
| animation-timing-function: cubic-bezier(.78, .14, .15, .86); | |
| } | |
| .zoom-up-appear, | |
| .zoom-up-enter, | |
| .zoom-up-leave { | |
| -webkit-animation-duration: .2s; | |
| animation-duration: .2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .zoom-up-appear.zoom-up-appear-active, | |
| .zoom-up-enter.zoom-up-enter-active { | |
| -webkit-animation-name: antZoomUpIn; | |
| animation-name: antZoomUpIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .zoom-up-leave.zoom-up-leave-active { | |
| -webkit-animation-name: antZoomUpOut; | |
| animation-name: antZoomUpOut; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .zoom-up-appear, | |
| .zoom-up-enter { | |
| -webkit-transform: scale(0); | |
| -ms-transform: scale(0); | |
| transform: scale(0); | |
| -webkit-animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| } | |
| .zoom-up-leave { | |
| -webkit-animation-timing-function: cubic-bezier(.78, .14, .15, .86); | |
| animation-timing-function: cubic-bezier(.78, .14, .15, .86); | |
| } | |
| .zoom-down-appear, | |
| .zoom-down-enter, | |
| .zoom-down-leave { | |
| -webkit-animation-duration: .2s; | |
| animation-duration: .2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .zoom-down-appear.zoom-down-appear-active, | |
| .zoom-down-enter.zoom-down-enter-active { | |
| -webkit-animation-name: antZoomDownIn; | |
| animation-name: antZoomDownIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .zoom-down-leave.zoom-down-leave-active { | |
| -webkit-animation-name: antZoomDownOut; | |
| animation-name: antZoomDownOut; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .zoom-down-appear, | |
| .zoom-down-enter { | |
| -webkit-transform: scale(0); | |
| -ms-transform: scale(0); | |
| transform: scale(0); | |
| -webkit-animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| } | |
| .zoom-down-leave { | |
| -webkit-animation-timing-function: cubic-bezier(.78, .14, .15, .86); | |
| animation-timing-function: cubic-bezier(.78, .14, .15, .86); | |
| } | |
| .zoom-left-appear, | |
| .zoom-left-enter, | |
| .zoom-left-leave { | |
| -webkit-animation-duration: .2s; | |
| animation-duration: .2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .zoom-left-appear.zoom-left-appear-active, | |
| .zoom-left-enter.zoom-left-enter-active { | |
| -webkit-animation-name: antZoomLeftIn; | |
| animation-name: antZoomLeftIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .zoom-left-leave.zoom-left-leave-active { | |
| -webkit-animation-name: antZoomLeftOut; | |
| animation-name: antZoomLeftOut; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .zoom-left-appear, | |
| .zoom-left-enter { | |
| -webkit-transform: scale(0); | |
| -ms-transform: scale(0); | |
| transform: scale(0); | |
| -webkit-animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| } | |
| .zoom-left-leave { | |
| -webkit-animation-timing-function: cubic-bezier(.78, .14, .15, .86); | |
| animation-timing-function: cubic-bezier(.78, .14, .15, .86); | |
| } | |
| .zoom-right-appear, | |
| .zoom-right-enter, | |
| .zoom-right-leave { | |
| -webkit-animation-duration: .2s; | |
| animation-duration: .2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .zoom-right-appear.zoom-right-appear-active, | |
| .zoom-right-enter.zoom-right-enter-active { | |
| -webkit-animation-name: antZoomRightIn; | |
| animation-name: antZoomRightIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .zoom-right-leave.zoom-right-leave-active { | |
| -webkit-animation-name: antZoomRightOut; | |
| animation-name: antZoomRightOut; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .zoom-right-appear, | |
| .zoom-right-enter { | |
| -webkit-transform: scale(0); | |
| -ms-transform: scale(0); | |
| transform: scale(0); | |
| -webkit-animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| animation-timing-function: cubic-bezier(.08, .82, .17, 1); | |
| } | |
| .zoom-right-leave { | |
| -webkit-animation-timing-function: cubic-bezier(.78, .14, .15, .86); | |
| animation-timing-function: cubic-bezier(.78, .14, .15, .86); | |
| } | |
| @-webkit-keyframes antZoomIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: scale(.2); | |
| transform: scale(.2); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes antZoomIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: scale(.2); | |
| transform: scale(.2); | |
| } | |
| to { | |
| opacity: 1; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @-webkit-keyframes antZoomOut { | |
| 0% { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform: scale(.2); | |
| transform: scale(.2); | |
| } | |
| } | |
| @keyframes antZoomOut { | |
| 0% { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform: scale(.2); | |
| transform: scale(.2); | |
| } | |
| } | |
| @-webkit-keyframes antZoomBigIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| to { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes antZoomBigIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| to { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @-webkit-keyframes antZoomBigOut { | |
| 0% { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| } | |
| @keyframes antZoomBigOut { | |
| 0% { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| } | |
| @-webkit-keyframes antZoomUpIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 50% 0; | |
| transform-origin: 50% 0; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| to { | |
| -webkit-transform-origin: 50% 0; | |
| transform-origin: 50% 0; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes antZoomUpIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 50% 0; | |
| transform-origin: 50% 0; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| to { | |
| -webkit-transform-origin: 50% 0; | |
| transform-origin: 50% 0; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @-webkit-keyframes antZoomUpOut { | |
| 0% { | |
| -webkit-transform-origin: 50% 0; | |
| transform-origin: 50% 0; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform-origin: 50% 0; | |
| transform-origin: 50% 0; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| } | |
| @keyframes antZoomUpOut { | |
| 0% { | |
| -webkit-transform-origin: 50% 0; | |
| transform-origin: 50% 0; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform-origin: 50% 0; | |
| transform-origin: 50% 0; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| } | |
| @-webkit-keyframes antZoomLeftIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 0 50%; | |
| transform-origin: 0 50%; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| to { | |
| -webkit-transform-origin: 0 50%; | |
| transform-origin: 0 50%; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes antZoomLeftIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 0 50%; | |
| transform-origin: 0 50%; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| to { | |
| -webkit-transform-origin: 0 50%; | |
| transform-origin: 0 50%; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @-webkit-keyframes antZoomLeftOut { | |
| 0% { | |
| -webkit-transform-origin: 0 50%; | |
| transform-origin: 0 50%; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform-origin: 0 50%; | |
| transform-origin: 0 50%; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| } | |
| @keyframes antZoomLeftOut { | |
| 0% { | |
| -webkit-transform-origin: 0 50%; | |
| transform-origin: 0 50%; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform-origin: 0 50%; | |
| transform-origin: 0 50%; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| } | |
| @-webkit-keyframes antZoomRightIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 100% 50%; | |
| transform-origin: 100% 50%; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| to { | |
| -webkit-transform-origin: 100% 50%; | |
| transform-origin: 100% 50%; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes antZoomRightIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 100% 50%; | |
| transform-origin: 100% 50%; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| to { | |
| -webkit-transform-origin: 100% 50%; | |
| transform-origin: 100% 50%; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @-webkit-keyframes antZoomRightOut { | |
| 0% { | |
| -webkit-transform-origin: 100% 50%; | |
| transform-origin: 100% 50%; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform-origin: 100% 50%; | |
| transform-origin: 100% 50%; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| } | |
| @keyframes antZoomRightOut { | |
| 0% { | |
| -webkit-transform-origin: 100% 50%; | |
| transform-origin: 100% 50%; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform-origin: 100% 50%; | |
| transform-origin: 100% 50%; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| } | |
| @-webkit-keyframes antZoomDownIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 50% 100%; | |
| transform-origin: 50% 100%; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| to { | |
| -webkit-transform-origin: 50% 100%; | |
| transform-origin: 50% 100%; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes antZoomDownIn { | |
| 0% { | |
| opacity: 0; | |
| -webkit-transform-origin: 50% 100%; | |
| transform-origin: 50% 100%; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| to { | |
| -webkit-transform-origin: 50% 100%; | |
| transform-origin: 50% 100%; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @-webkit-keyframes antZoomDownOut { | |
| 0% { | |
| -webkit-transform-origin: 50% 100%; | |
| transform-origin: 50% 100%; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform-origin: 50% 100%; | |
| transform-origin: 50% 100%; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| } | |
| @keyframes antZoomDownOut { | |
| 0% { | |
| -webkit-transform-origin: 50% 100%; | |
| transform-origin: 50% 100%; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| to { | |
| opacity: 0; | |
| -webkit-transform-origin: 50% 100%; | |
| transform-origin: 50% 100%; | |
| -webkit-transform: scale(.8); | |
| transform: scale(.8); | |
| } | |
| } | |
| .fade-appear, | |
| .fade-enter, | |
| .fade-leave { | |
| -webkit-animation-duration: .2s; | |
| animation-duration: .2s; | |
| -webkit-animation-fill-mode: both; | |
| animation-fill-mode: both; | |
| -webkit-animation-play-state: paused; | |
| animation-play-state: paused; | |
| } | |
| .fade-appear.fade-appear-active, | |
| .fade-enter.fade-enter-active { | |
| -webkit-animation-name: antFadeIn; | |
| animation-name: antFadeIn; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .fade-leave.fade-leave-active { | |
| -webkit-animation-name: antFadeOut; | |
| animation-name: antFadeOut; | |
| -webkit-animation-play-state: running; | |
| animation-play-state: running; | |
| } | |
| .fade-appear, | |
| .fade-enter { | |
| opacity: 0; | |
| } | |
| .fade-appear, | |
| .fade-enter, | |
| .fade-leave { | |
| -webkit-animation-timing-function: linear; | |
| animation-timing-function: linear; | |
| } | |
| @-webkit-keyframes antFadeIn { | |
| 0% { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes antFadeIn { | |
| 0% { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @-webkit-keyframes antFadeOut { | |
| 0% { | |
| opacity: 1; | |
| } | |
| to { | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes antFadeOut { | |
| 0% { | |
| opacity: 1; | |
| } | |
| to { | |
| opacity: 0; | |
| } | |
| } | |
| @-webkit-keyframes diffZoomIn1 { | |
| 0% { | |
| -webkit-transform: scale(0); | |
| transform: scale(0); | |
| } | |
| to { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes diffZoomIn1 { | |
| 0% { | |
| -webkit-transform: scale(0); | |
| transform: scale(0); | |
| } | |
| to { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @-webkit-keyframes diffZoomIn2 { | |
| 0% { | |
| -webkit-transform: scale(0); | |
| transform: scale(0); | |
| } | |
| to { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes diffZoomIn2 { | |
| 0% { | |
| -webkit-transform: scale(0); | |
| transform: scale(0); | |
| } | |
| to { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @-webkit-keyframes diffZoomIn3 { | |
| 0% { | |
| -webkit-transform: scale(0); | |
| transform: scale(0); | |
| } | |
| to { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes diffZoomIn3 { | |
| 0% { | |
| -webkit-transform: scale(0); | |
| transform: scale(0); | |
| } | |
| to { | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment