.mblSwap { -webkit-animation-duration: .6s; -webkit-animation-timing-function: linear; } .mblSwap.mblOut { -webkit-animation-name: mblSwapOut; } .mblSwap.mblIn { -webkit-animation-name: mblSwapIn; } .mblSwap.mblOut.mblReverse { -webkit-animation-name: mblSwapOutReverse; } .mblSwap.mblIn.mblReverse { -webkit-animation-name: mblSwapInReverse; } @-webkit-keyframes mblSwapOut { 0% { -webkit-transform: translate3d(0%,0%,0px) scale(1.0); opacity: 1; } 50% { z-index: -60; -webkit-transform: translate3d(-45%,5%,0px) scale(.6); opacity: .4; } 100% { z-index: -100; -webkit-transform: translate3d(-20%,10%,0px) scale(.4); opacity: 0; } } @-webkit-keyframes mblSwapIn { 0% { z-index: -100; -webkit-transform: translate3d(-20%,0%,0px) scale(.5); opacity: .4; } 50% { z-index: -40; -webkit-transform: translate3d(45%,0%,0px) scale(.7); opacity: 1; } 100% { -webkit-transform: translate3d(0%,0%,0px) scale(1.0); opacity: 1; } } @-webkit-keyframes mblSwapOutReverse { 0% { -webkit-transform: translate3d(0%,0%,0px) scale(1.0); opacity: 1; } 50% { z-index: -60; -webkit-transform: translate3d(45%,5%,0px) scale(.6); opacity: .4; } 100% { z-index: -100; -webkit-transform: translate3d(20%,10%,0px) scale(.4); opacity: 0; } } @-webkit-keyframes mblSwapInReverse { 0% { z-index: -100; -webkit-transform: translate3d(20%,0%,0px) scale(.5); opacity: .4; } 50% { z-index: -40; -webkit-transform: translate3d(-45%,0%,0px) scale(.7); opacity: 1; } 100% { -webkit-transform: translate3d(0%,0%,0px) scale(1.0); opacity: 1; } }