dojox/mobile/themes/common/transitions/swap.css

Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.

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