/* Slide animations */
[class^="from-"], [class*=" from-"] {
opacity: 1;
}
/* "To" animations */
/*******************************************/
/*******************************************/
/* To top left */
/*******************************************/
/*******************************************/
.to-topleft {
-webkit-animation: toTopLeft 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toTopLeft 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toTopLeft {
to {
-webkit-transform: translate3d(-100%, -100%, 0);
transform: translate3d(-100%, -100%, 0);
}
}
@keyframes toTopLeft {
to {
-webkit-transform: translate3d(-100%, -100%, 0);
transform: translate3d(-100%, -100%, 0);
}
}
.to-topleft .scene {
-webkit-animation: toTopLeftScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toTopLeftScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toTopLeftScene {
to {
-webkit-transform: rotate3d(1, 1, 0.5, 30deg);
transform: rotate3d(1, 1, 0.5, 30deg);
}
}
@keyframes toTopLeftScene {
to {
-webkit-transform: rotate3d(1, 1, 0.5, 30deg);
transform: rotate3d(1, 1, 0.5, 30deg);
}
}
.to-topleft .view--rotate {
-webkit-animation: toTopLeftViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toTopLeftViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toTopLeftViewRotate {
to {
-webkit-transform: rotate3d(0, 1, 0, 30deg);
transform: rotate3d(0, 1, 0, 30deg);
}
}
@keyframes toTopLeftViewRotate {
to {
-webkit-transform: rotate3d(0, 1, 0, 30deg);
transform: rotate3d(0, 1, 0, 30deg);
}
}
/*******************************************/
/*******************************************/
/* To top */
/*******************************************/
/*******************************************/
.to-top {
-webkit-animation: toTop 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toTop 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toTop {
to {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes toTop {
to {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.to-top .scene {
-webkit-animation: toTopScene .8s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toTopScene .8s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toTopScene {
to {
-webkit-transform: rotate3d(1, 0.5, 0.2, 30deg);
transform: rotate3d(1, 0.5, 0.2, 30deg);
}
}
@keyframes toTopScene {
to {
-webkit-transform: rotate3d(1, 0.5, 0.2, 30deg);
transform: rotate3d(1, 0.5, 0.2, 30deg);
}
}
.to-top .view--rotate {
-webkit-animation: toTopViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toTopViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toTopViewRotate {
to {
-webkit-transform: rotate3d(0, 1, 0, -30deg);
transform: rotate3d(0, 1, 0, -30deg);
}
}
@keyframes toTopViewRotate {
to {
-webkit-transform: rotate3d(0, 1, 0, -30deg);
transform: rotate3d(0, 1, 0, -30deg);
}
}
/*******************************************/
/*******************************************/
/* To topright */
/*******************************************/
/*******************************************/
.to-topright {
-webkit-animation: toTopRight 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toTopRight 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toTopRight {
to {
-webkit-transform: translate3d(100%, -100%, 0);
transform: translate3d(100%, -100%, 0);
}
}
@keyframes toTopRight {
to {
-webkit-transform: translate3d(100%, -100%, 0);
transform: translate3d(100%, -100%, 0);
}
}
.to-topright .scene {
-webkit-animation: toTopRightScene .8s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toTopRightScene .8s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toTopRightScene {
to {
-webkit-transform: rotate3d(1, 1, 0.5, -30deg);
transform: rotate3d(1, 1, 0.5, -30deg);
}
}
@keyframes toTopRightScene {
to {
-webkit-transform: rotate3d(1, 1, 0.5, -30deg);
transform: rotate3d(1, 1, 0.5, -30deg);
}
}
.to-topright .view--rotate {
-webkit-animation: toTopRightViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toTopRightViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toTopRightViewRotate {
to {
-webkit-transform: rotate3d(0, 1, 0, -30deg);
transform: rotate3d(0, 1, 0, -30deg);
}
}
@keyframes toTopRightViewRotate {
to {
-webkit-transform: rotate3d(0, 1, 0, -30deg);
transform: rotate3d(0, 1, 0, -30deg);
}
}
/*******************************************/
/*******************************************/
/* To right */
/*******************************************/
/*******************************************/
.to-right {
-webkit-animation: toRight 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toRight 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toRight {
to {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes toRight {
to {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.to-right .scene {
-webkit-animation: toRightScene .8s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toRightScene .8s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toRightScene {
to {
-webkit-transform: rotate3d(0, 1, 0, -60deg);
transform: rotate3d(0, 1, 0, -60deg);
}
}
@keyframes toRightScene {
to {
-webkit-transform: rotate3d(0, 1, 0, -60deg);
transform: rotate3d(0, 1, 0, -60deg);
}
}
.to-right .view--rotate {
-webkit-animation: toRightViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toRightViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toRightViewRotate {
to {
-webkit-transform: rotate3d(0, 1, 0, -50deg);
transform: rotate3d(0, 1, 0, -50deg);
}
}
@keyframes toRightViewRotate {
to {
-webkit-transform: rotate3d(0, 1, 0, -50deg);
transform: rotate3d(0, 1, 0, -50deg);
}
}
/*******************************************/
/*******************************************/
/* To bottom right */
/*******************************************/
/*******************************************/
.to-bottomright {
-webkit-animation: toBottomRight 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toBottomRight 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toBottomRight {
to {
-webkit-transform: translate3d(100%, 100%, 0);
transform: translate3d(100%, 100%, 0);
}
}
@keyframes toBottomRight {
to {
-webkit-transform: translate3d(100%, 100%, 0);
transform: translate3d(100%, 100%, 0);
}
}
.to-bottomright .scene {
-webkit-animation: toBottomRightScene .8s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toBottomRightScene .8s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toBottomRightScene {
to {
-webkit-transform: rotate3d(-1, 1, 0.5, -30deg);
transform: rotate3d(-1, 1, 0.5, -30deg);
}
}
@keyframes toBottomRightScene {
to {
-webkit-transform: rotate3d(-1, 1, 0.5, -30deg);
transform: rotate3d(-1, 1, 0.5, -30deg);
}
}
.to-bottomright .view--rotate {
-webkit-animation: toBottomRightViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toBottomRightViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toBottomRightViewRotate {
to {
-webkit-transform: rotate3d(0, 1, 0, -30deg);
transform: rotate3d(0, 1, 0, -30deg);
}
}
@keyframes toBottomRightViewRotate {
to {
-webkit-transform: rotate3d(0, 1, 0, -30deg);
transform: rotate3d(0, 1, 0, -30deg);
}
}
/*******************************************/
/*******************************************/
/* To bottom */
/*******************************************/
/*******************************************/
.to-bottom {
-webkit-animation: toBottom 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toBottom 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toBottom {
to {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes toBottom {
to {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.to-bottom .scene {
-webkit-animation: toBottomScene .8s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toBottomScene .8s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toBottomScene {
to {
-webkit-transform: rotate3d(-1, -0.5, 0.2, 30deg);
transform: rotate3d(-1, -0.5, 0.2, 30deg);
}
}
@keyframes toBottomScene {
to {
-webkit-transform: rotate3d(-1, -0.5, 0.2, 30deg);
transform: rotate3d(-1, -0.5, 0.2, 30deg);
}
}
.to-bottom .view--rotate {
-webkit-animation: toBottomViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toBottomViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toBottomViewRotate {
to {
-webkit-transform: rotate3d(0, 1, 0, 30deg);
transform: rotate3d(0, 1, 0, 30deg);
}
}
@keyframes toBottomViewRotate {
to {
-webkit-transform: rotate3d(0, 1, 0, 30deg);
transform: rotate3d(0, 1, 0, 30deg);
}
}
/*******************************************/
/*******************************************/
/* To bottom left */
/*******************************************/
/*******************************************/
.to-bottomleft {
-webkit-animation: toBottomLeft 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toBottomLeft 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toBottomLeft {
to {
-webkit-transform: translate3d(-100%, 100%, 0);
transform: translate3d(-100%, 100%, 0);
}
}
@keyframes toBottomLeft {
to {
-webkit-transform: translate3d(-100%, 100%, 0);
transform: translate3d(-100%, 100%, 0);
}
}
.to-bottomleft .scene {
-webkit-animation: toBottomLeftScene .8s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toBottomLeftScene .8s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toBottomLeftScene {
to {
-webkit-transform: rotate3d(-1, 1, 0.5, 30deg);
transform: rotate3d(-1, 1, 0.5, 30deg);
}
}
@keyframes toBottomLeftScene {
to {
-webkit-transform: rotate3d(-1, 1, 0.5, 30deg);
transform: rotate3d(-1, 1, 0.5, 30deg);
}
}
.to-bottomleft .view--rotate {
-webkit-animation: toBottomLeftViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toBottomLeftViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toBottomLeftViewRotate {
to {
-webkit-transform: rotate3d(0, 1, 0, 30deg);
transform: rotate3d(0, 1, 0, 30deg);
}
}
@keyframes toBottomLeftViewRotate {
to {
-webkit-transform: rotate3d(0, 1, 0, 30deg);
transform: rotate3d(0, 1, 0, 30deg);
}
}
/*******************************************/
/*******************************************/
/* To left */
/*******************************************/
/*******************************************/
.to-left {
-webkit-animation: toLeft 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toLeft 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toLeft {
to {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes toLeft {
to {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.to-left .scene {
-webkit-animation: toLeftScene .8s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toLeftScene .8s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toLeftScene {
to {
-webkit-transform: rotate3d(0, 1, 0, 60deg);
transform: rotate3d(0, 1, 0, 60deg);
}
}
@keyframes toLeftScene {
to {
-webkit-transform: rotate3d(0, 1, 0, 60deg);
transform: rotate3d(0, 1, 0, 60deg);
}
}
.to-left .view--rotate {
-webkit-animation: toLeftViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards;
animation: toLeftViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes toLeftViewRotate {
to {
-webkit-transform: rotate3d(0, 1, 0, 50deg);
transform: rotate3d(0, 1, 0, 50deg);
}
}
@keyframes toLeftViewRotate {
to {
-webkit-transform: rotate3d(0, 1, 0, 50deg);
transform: rotate3d(0, 1, 0, 50deg);
}
}
/* "From" animations */
/*******************************************/
/*******************************************/
/* From top left */
/*******************************************/
/*******************************************/
.from-topleft {
-webkit-animation: fromTopLeft 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromTopLeft 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromTopLeft {
from {
-webkit-transform: translate3d(-100%, -100%, 0);
transform: translate3d(-100%, -100%, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fromTopLeft {
from {
-webkit-transform: translate3d(-100%, -100%, 0);
transform: translate3d(-100%, -100%, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.from-topleft .scene {
-webkit-animation: fromTopLeftScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromTopLeftScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromTopLeftScene {
from {
-webkit-transform: rotate3d(1, 1, -1, -50deg);
transform: rotate3d(1, 1, -1, -50deg);
}
}
@keyframes fromTopLeftScene {
from {
-webkit-transform: rotate3d(1, 1, -1, -50deg);
transform: rotate3d(1, 1, -1, -50deg);
}
}
.from-topleft .view--rotate {
-webkit-animation: fromTopLeftViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromTopLeftViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromTopLeftViewRotate {
from {
-webkit-transform: rotate3d(0, 1, 0, 50deg);
transform: rotate3d(0, 1, 0, 50deg);
}
}
@keyframes fromTopLeftViewRotate {
from {
-webkit-transform: rotate3d(0, 1, 0, 50deg);
transform: rotate3d(0, 1, 0, 50deg);
}
}
/*******************************************/
/*******************************************/
/* From top */
/*******************************************/
/*******************************************/
.from-top {
-webkit-animation: fromTop 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromTop 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromTop {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fromTop {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.from-top .scene {
-webkit-animation: fromTopScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromTopScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromTopScene {
from {
-webkit-transform: rotate3d(1, -0.5, -0.2, 30deg);
transform: rotate3d(1, -0.5, -0.2, 30deg);
}
}
@keyframes fromTopScene {
from {
-webkit-transform: rotate3d(1, -0.5, -0.2, 30deg);
transform: rotate3d(1, -0.5, -0.2, 30deg);
}
}
.from-top .view--rotate {
-webkit-animation: fromTopViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromTopViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromTopViewRotate {
from {
-webkit-transform: rotate3d(0, 1, 0, 30deg);
transform: rotate3d(0, 1, 0, 30deg);
}
}
@keyframes fromTopViewRotate {
from {
-webkit-transform: rotate3d(0, 1, 0, 30deg);
transform: rotate3d(0, 1, 0, 30deg);
}
}
/*******************************************/
/*******************************************/
/* From top right */
/*******************************************/
/*******************************************/
.from-topright {
-webkit-animation: fromTopRight 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromTopRight 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromTopRight {
from {
-webkit-transform: translate3d(100%, -100%, 0);
transform: translate3d(100%, -100%, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fromTopRight {
from {
-webkit-transform: translate3d(100%, -100%, 0);
transform: translate3d(100%, -100%, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.from-topright .scene {
-webkit-animation: fromTopRightScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromTopRightScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromTopRightScene {
from {
-webkit-transform: rotate3d(-1, 1, -1, 50deg);
transform: rotate3d(-1, 1, -1, 50deg);
}
}
@keyframes fromTopRightScene {
from {
-webkit-transform: rotate3d(-1, 1, -1, 50deg);
transform: rotate3d(-1, 1, -1, 50deg);
}
}
.from-topright .view--rotate {
-webkit-animation: fromTopRightViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromTopRightViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromTopRightViewRotate {
from {
-webkit-transform: rotate3d(0, 1, 0, -50deg);
transform: rotate3d(0, 1, 0, -50deg);
}
}
@keyframes fromTopRightViewRotate {
from {
-webkit-transform: rotate3d(0, 1, 0, -50deg);
transform: rotate3d(0, 1, 0, -50deg);
}
}
/*******************************************/
/*******************************************/
/* From right */
/*******************************************/
/*******************************************/
.from-right {
-webkit-animation: fromRight 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromRight 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fromRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.from-right .scene {
-webkit-animation: fromRightScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromRightScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromRightScene {
from {
-webkit-transform: rotate3d(0, 1, 0, -60deg);
transform: rotate3d(0, 1, 0, -60deg);
}
}
@keyframes fromRightScene {
from {
-webkit-transform: rotate3d(0, 1, 0, -60deg);
transform: rotate3d(0, 1, 0, -60deg);
}
}
.from-right .view--rotate {
-webkit-animation: fromRightViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromRightViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromRightViewRotate {
from {
-webkit-transform: rotate3d(0, 1, 0, -50deg);
transform: rotate3d(0, 1, 0, -50deg);
}
}
@keyframes fromRightViewRotate {
from {
-webkit-transform: rotate3d(0, 1, 0, -50deg);
transform: rotate3d(0, 1, 0, -50deg);
}
}
/*******************************************/
/*******************************************/
/* From bottom right */
/*******************************************/
/*******************************************/
.from-bottomright {
-webkit-animation: fromBottomRight 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromBottomRight 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromBottomRight {
from {
-webkit-transform: translate3d(100%, 100%, 0);
transform: translate3d(100%, 100%, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fromBottomRight {
from {
-webkit-transform: translate3d(100%, 100%, 0);
transform: translate3d(100%, 100%, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.from-bottomright .scene {
-webkit-animation: fromBottomRightScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromBottomRightScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromBottomRightScene {
from {
-webkit-transform: rotate3d(1, 1, 1, 50deg);
transform: rotate3d(1, 1, 1, 50deg);
}
}
@keyframes fromBottomRightScene {
from {
-webkit-transform: rotate3d(1, 1, 1, 50deg);
transform: rotate3d(1, 1, 1, 50deg);
}
}
.from-bottomright .view--rotate {
-webkit-animation: fromBottomRightViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromBottomRightViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromBottomRightViewRotate {
from {
-webkit-transform: rotate3d(0, 1, 0, -50deg);
transform: rotate3d(0, 1, 0, -50deg);
}
}
@keyframes fromBottomRightViewRotate {
from {
-webkit-transform: rotate3d(0, 1, 0, -50deg);
transform: rotate3d(0, 1, 0, -50deg);
}
}
/*******************************************/
/*******************************************/
/* From bottom */
/*******************************************/
/*******************************************/
.from-bottom {
-webkit-animation: fromBottom 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromBottom 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromBottom {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fromBottom {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.from-bottom .scene {
-webkit-animation: fromBottomScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromBottomScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromBottomScene {
from {
-webkit-transform: rotate3d(1, 0.5, 0.2, 30deg);
transform: rotate3d(1, 0.5, 0.2, 30deg);
}
}
@keyframes fromBottomScene {
from {
-webkit-transform: rotate3d(1, 0.5, 0.2, 30deg);
transform: rotate3d(1, 0.5, 0.2, 30deg);
}
}
.from-bottom .view--rotate {
-webkit-animation: fromBottomViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromBottomViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromBottomViewRotate {
from {
-webkit-transform: rotate3d(0, 1, 0, -30deg);
transform: rotate3d(0, 1, 0, -30deg);
}
}
@keyframes fromBottomViewRotate {
from {
-webkit-transform: rotate3d(0, 1, 0, -30deg);
transform: rotate3d(0, 1, 0, -30deg);
}
}
/*******************************************/
/*******************************************/
/* From bottom left */
/*******************************************/
/*******************************************/
.from-bottomleft {
-webkit-animation: fromBottomLeft 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromBottomLeft 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromBottomLeft {
from {
-webkit-transform: translate3d(-100%, 100%, 0);
transform: translate3d(-100%, 100%, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fromBottomLeft {
from {
-webkit-transform: translate3d(-100%, 100%, 0);
transform: translate3d(-100%, 100%, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.from-bottomleft .scene {
-webkit-animation: fromBottomLeftScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromBottomLeftScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromBottomLeftScene {
from {
-webkit-transform: rotate3d(-1, 1, 1, -50deg);
transform: rotate3d(-1, 1, 1, -50deg);
}
}
@keyframes fromBottomLeftScene {
from {
-webkit-transform: rotate3d(-1, 1, 1, -50deg);
transform: rotate3d(-1, 1, 1, -50deg);
}
}
.from-bottomleft .view--rotate {
-webkit-animation: fromBottomLeftViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromBottomLeftViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromBottomLeftViewRotate {
from {
-webkit-transform: rotate3d(0, 1, 0, 50deg);
transform: rotate3d(0, 1, 0, 50deg);
}
}
@keyframes fromBottomLeftViewRotate {
from {
-webkit-transform: rotate3d(0, 1, 0, 50deg);
transform: rotate3d(0, 1, 0, 50deg);
}
}
/*******************************************/
/*******************************************/
/* From left */
/*******************************************/
/*******************************************/
.from-left {
-webkit-animation: fromLeft 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromLeft 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fromLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.from-left .scene {
-webkit-animation: fromLeftScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromLeftScene 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromLeftScene {
from {
-webkit-transform: rotate3d(0, 1, 0, 60deg);
transform: rotate3d(0, 1, 0, 60deg);
}
}
@keyframes fromLeftScene {
from {
-webkit-transform: rotate3d(0, 1, 0, 60deg);
transform: rotate3d(0, 1, 0, 60deg);
}
}
.from-left .view--rotate {
-webkit-animation: fromLeftViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards;
animation: fromLeftViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards;
}
@-webkit-keyframes fromLeftViewRotate {
from {
-webkit-transform: rotate3d(0, 1, 0, 50deg);
transform: rotate3d(0, 1, 0, 50deg);
}
}
@keyframes fromLeftViewRotate {
from {
-webkit-transform: rotate3d(0, 1, 0, 50deg);
transform: rotate3d(0, 1, 0, 50deg);
}
}