• Home
• de.swm
• swm-mobile
• 2.4
• source code
• transitions.css

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

de.swm.commons.mobile.client.theme.bootstrap.css.transitions.css Maven / Gradle / Ivy

@if swmmobile.css pretty {
	@external slide, slidedown, slide, slideup, slidedown, fade, flip0, flip1, pop, swap0, cube, in, out, reverse, start;
}

.slide, .slideup, .slidedown {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in-out;
    position: absolute;

    transition-property: transform;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
}

.slide.in, .slide.out.reverse.start {
    -webkit-transform: translate3d(100%, 0, 0);
    
    transform: translate3d(100%, 0, 0);
}

.slide.out.start, .slide.in.reverse {
    -webkit-transform: translate3d(-100%, 0, 0);
    
    transform: translate3d(-100%, 0, 0);
}

.slide.out, .slide.out.reverse, .slide.in.start, .slide.in.reverse.start {
    -webkit-transform: translate3d(0, 0, 0);
    
    transform: translate3d(0, 0, 0);
}

.slideup.in, .slideup.out.reverse, .slidedown.in, .slidedown.out.reverse {
	z-index: 1;
}

.slideup.out, .slideup.in.reverse, .slidedown.out, .slidedown.in.reverse {
	z-index: 0;
}

.slideup.in, .slideup.out.reverse.start {
    -webkit-transform: translate3d(0, 100%, 0);
    
    transform: translate3d(0, 100%, 0);
}

.slideup.out, .slideup.in.reverse, .slideup.out.reverse, .slideup.in.start {
    -webkit-transform: translate3d(0, 0, 0);

	transform: translate3d(0, 0, 0);
}

.slidedown.in, .slidedown.out.reverse.start {
    -webkit-transform: translate3d(0, -100%, 0);
    
    transform: translate3d(0, -100%, 0);
}

.slidedown.out, .slidedown.in.reverse, .slidedown.out.reverse, .slidedown.in.start {
    -webkit-transform: translate3d(0, 0, 0);
    
    transform: translate3d(0, 0, 0);
}

.fade {
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1000ms;
    -webkit-transition-timing-function: ease-in-out;
    position: absolute;

    transition-property: opacity;
    transition-duration: 1000ms;
    transition-timing-function: ease-in-out;
}

.fade.in, .fade.in.reverse, .fade.out.start, .fade.out.reverse.start {
    opacity: 0;
}

.fade.out, .fade.out.reverse, .fade.in.start, .fade.in.reverse.start {
    opacity: 1;
}

.flip0, .flip1 {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-out;
	-webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    position: absolute;

    transition-property: transform;
    transition-duration: 300ms;
    transition-timing-function: ease-out;
	transform-style: preserve-3d;
    backface-visibility: hidden;
}

.flip0.out, .flip0.out.reverse {
	-webkit-transform: perspective(4000) rotateY(0deg) scale(1);
	
	transform: perspective(4000) rotateY(0deg) scale(1);
}

.flip0.out.start, .flip1.in.reverse {
	-webkit-transform: perspective(4000) rotateY(-90deg) scale(.8);
	
	transform: perspective(4000) rotateY(-90deg) scale(.8);
}

.flip1.in, .flip0.out.reverse.start {
	-webkit-transform: perspective(4000) rotateY(90deg) scale(.8);
	
	transform: perspective(4000) rotateY(90deg) scale(.8);
}

.flip1.in.start, .flip1.in.reverse.start {
	-webkit-transform: perspective(4000) rotateY(0deg) scale(1);
	
	transform: perspective(4000) rotateY(0deg) scale(1);
}

.pop {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 250ms;
    -webkit-transition-timing-function: ease-in-out;
    position: absolute;

    transition-property: transform;
    transition-duration: 250ms;
    transition-timing-function: ease-in-out;
}

.pop.in, .pop.out.reverse.start {
	-webkit-transform: scale(0);
	
	transform: scale(0);
}

.pop.in.reverse, .pop.in.reverse.start, .pop.in.start, .pop.out.reverse {
	-webkit-transform: scale(1);
	
	transform: scale(1);
}

.pop.in.reverse, .pop.in.reverse.start {
	z-index: -1;
}

.swap0, .swap1 {
    -webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 200ms;
	-webkit-transition-timing-function: linear;

    transition-property: transform;
	transition-duration: 200ms;
	transition-timing-function: linear;
}

.swap0.out, .swap1.in {
	z-index: 10;
}

.swap0.in, .swap1.out {
	z-index: 0;
}

.swap0.out, .swap1.in.start, .swap0.out.reverse, .swap1.in.reverse.start {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
	 opacity: 1;

    transform: translate3d(0, 0, 0) scale(1);
}
.swap0.out.start, .swap1.out, .swap0.in.reverse.start, .swap1.in.reverse {
    -webkit-transform: translate3d(-50%, 0, 0) scale(.8);
	 opacity: 1;

    transform: translate3d(-50%, 0, 0) scale(.8);
}
.swap0.in, .swap1.out.start, .swap0.in.reverse, .swap1.out.reverse.start {
    -webkit-transform: translate3d(0, 0, 0) scale(.4);
	 opacity: .4;

    transform: translate3d(0, 0, 0) scale(.4);
}
.swap0.in.start, .swap1.in, .swap0.out.reverse.start, .swap1.out.reverse {
    -webkit-transform: translate3d(50%, 0, 0) scale(.8);
	 opacity: 1;

    transform: translate3d(50%, 0, 0) scale(.8);
}


/* Straight copy from jqtouch. */
/*
.cube {
	-webkit-transform: perspective(80);
	-webkit-transform-style: preserve-3d;
    -webkit-animation-duration: 5.55s;
    position: absolute;
}

.cube.in.start {
	-webkit-animation-name: cubeinfromright;
    -webkit-transform-origin: 0% 50%;
}
.cube.out.start {
	-webkit-animation-name: cubeouttoleft;
    -webkit-transform-origin: 100% 50%;
}
.cube.in.reverse.start {
	-webkit-animation-name: cubeinfromleft;	
    -webkit-transform-origin: 100% 50%;
}
.cube.out.reverse.start {
	-webkit-animation-name: cubeouttoright;
    -webkit-transform-origin: 0% 50%;

}

@-webkit-keyframes cubeinfromleft {
	from {
        -webkit-transform: rotateY(-90deg) translateZ(100%);
        opacity: 1;
	}
    to {
        -webkit-transform: rotateY(0deg) translateZ(0);
        opacity: 1;
    }
}
@-webkit-keyframes cubeouttoright {
    from {
        -webkit-transform: rotateY(0deg) translateX(0);
        opacity: 1;
    }
    to {
        -webkit-transform: rotateY(90deg) translateZ(100%);
        opacity: 1;
    }
}
@-webkit-keyframes cubeinfromright {
    from {
        -webkit-transform: rotateY(90deg) translateZ(100%);
        opacity: 1;
    }
    to {
        -webkit-transform: rotateY(0deg) translateZ(0);
        opacity: 1;
    }
}
@-webkit-keyframes cubeouttoleft {
    from {
        -webkit-transform: rotateY(0deg) translateZ(0);
        opacity: 1;
    }
    to {
        -webkit-transform: rotateY(-90deg) translateZ(100%);
        opacity: 1;
    }
}
*/