✏️ Editing: animations.css Writable

/* 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);
	}
}

🔐 Sid Gifari File Manager Pro