.slide-motion(@className, @keyframeName) { .make-motion(@className, @keyframeName); .@{className}-enter, .@{className}-appear { opacity: 0; animation-timing-function: @ease-out-quint; } .@{className}-leave { animation-timing-function: @ease-in-quint; } } .slide-motion(slide-up, antSlideUp); .slide-motion(slide-down, antSlideDown); .slide-motion(slide-left, antSlideLeft); .slide-motion(slide-right, antSlideRight); @keyframes antSlideUpIn { 0% { opacity: 0; transform-origin: 0% 0%; transform: scaleY(.8); } 100% { opacity: 1; transform-origin: 0% 0%; transform: scaleY(1); } } @keyframes antSlideUpOut { 0% { opacity: 1; transform-origin: 0% 0%; transform: scaleY(1); } 100% { opacity: 0; transform-origin: 0% 0%; transform: scaleY(.8); } } @keyframes antSlideDownIn { 0% { opacity: 0; transform-origin: 100% 100%; transform: scaleY(.8); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scaleY(1); } } @keyframes antSlideDownOut { 0% { opacity: 1; transform-origin: 100% 100%; transform: scaleY(1); } 100% { opacity: 0; transform-origin: 100% 100%; transform: scaleY(.8); } } @keyframes antSlideLeftIn { 0% { opacity: 0; transform-origin: 0% 0%; transform: scaleX(.8); } 100% { opacity: 1; transform-origin: 0% 0%; transform: scaleX(1); } } @keyframes antSlideLeftOut { 0% { opacity: 1; transform-origin: 0% 0%; transform: scaleX(1); } 100% { opacity: 0; transform-origin: 0% 0%; transform: scaleX(.8); } } @keyframes antSlideRightIn { 0% { opacity: 0; transform-origin: 100% 0%; transform: scaleX(.8); } 100% { opacity: 1; transform-origin: 100% 0%; transform: scaleX(1); } } @keyframes antSlideRightOut { 0% { opacity: 1; transform-origin: 100% 0%; transform: scaleX(1); } 100% { opacity: 0; transform-origin: 100% 0%; transform: scaleX(.8); } }