/* Copyright © Microsoft Corporation. All Rights Reserved. */
/* Demo Author: Charilaos "Harris" Papadopoulos, Microsoft Corporation */


/*
    Predefined full-page animations for the CSS Animation/Transform IE Test Drive Demo
    Please check FullPageAnimations.js for more information  
*/
@-webkit-keyframes ypushFromTop {
    from {
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: translateY(-1000px);
        animation-timing-function: ease;
		opacity: 0;
    }

    25% {
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: translateY(-300px);
        animation-timing-function: ease;
		opacity: 0.1;
    }

    50% {
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: translateY(-100px);
        animation-timing-function: ease;
		opacity: 0.3;
    }
	75% {
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: translateY(-50px);
        animation-timing-function: ease;
		opacity: 0.55;
    }

    95% {
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: translateY(-20px);
        animation-timing-function: ease;
		opacity: 0.95;
    }
	98% {
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: translateY(-5px);
        animation-timing-function: ease;
		opacity: 0.98;
    }
    to {
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: translateY(0px);
        animation-timing-function: ease;
		opacity: 1;
    }    
}

@-webkit-keyframes rotateInLeft {

    from {
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: rotateY(180deg);
    }

    to {    
        -webkit-transform-origin: 0% 0%;    
        -webkit-transform: rotateY(0deg);
    }
}

@-webkit-keyframes rotateOutLeft {

    from {
        -webkit-transform-origin: 0% 0%;
    }

    to {
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: rotateY(180deg);
    }
}

@-webkit-keyframes rotateInRight {

    from {
        -webkit-transform-origin: 100% 0%;
        -webkit-transform: rotateY(-180deg);
        
    }

    to {
        -webkit-transform-origin: 100% 0%;
    }    
}

@-webkit-keyframes rotateInRightWithoutToKeyframe {

    from {
        -webkit-transform-origin: 100% 0%;
        -webkit-transform: rotateY(-180deg);
    }
}

@-webkit-keyframes rotateOutRight {

    from {
        -webkit-transform-origin: 100% 0%;
    }

    to {
        -webkit-transform-origin: 100% 0%;
        -webkit-transform: rotateY(-180deg);
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOut {    
    to {
        opacity: 0;
    }        
}

@-webkit-keyframes whirlIn {
    from {
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(0) rotateZ(1260deg);
    }
    
    to {
        -webkit-transform-origin: 50% 50%;
    }
    
}

@-webkit-keyframes whirlOut {
    from {
        -webkit-transform-origin: 50% 50%;
    }
    
    to {
        -webkit-transform-origin: 50% 50%;
        -webkit-transform: scale(0) rotateZ(1260deg);
    }
    
}

@-webkit-keyframes fallFromTop {
    from {
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: rotateX(-180deg);
        animation-timing-function: ease;
    }

    50% {
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: rotateX(30deg);
        animation-timing-function: ease;
    }

    85% {
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: rotateX(-10deg);
        animation-timing-function: ease;
    }
        
    to {
        -webkit-transform-origin: 0% 0%;
        -webkit-transform: rotateX(0deg);
        animation-timing-function: ease;
    }    
}

@-webkit-keyframes dropToBottom {
    from {
        -webkit-transform-origin: 0% 100%;
    }
        
    to {
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: rotateX(180deg);
    }    
}

@-webkit-keyframes slideInSkew {
    from {
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: translateX(-200%) skewX(-45deg);
    }

    50% {
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: translateX(0%) skewX(-45deg);
    }

    90% {
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: translateX(0%) skewX(10deg);
    }
    
    to {
        -webkit-transform-origin: 0% 100%;
        -webkit-transform:translateX(0%) skewX(0deg);
    }
}

@-webkit-keyframes slideOutSkew {    
    from {
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: translateX(0%);
    }
    
    to {
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: skewX(-45deg) translateX(200%) ;
    }
}

@-webkit-keyframes tumbleIn {
    from {
        -webkit-transform-origin: 0% 100%;
        -webkit-transform: rotateZ(-180deg);        
    }

    to {
        -webkit-transform-origin: 0% 100%;
    }
    
}

@-webkit-keyframes tumbleOut {
    from {
        -webkit-transform-origin: 100% 100%;       
    }

    to {
        -webkit-transform-origin: 100% 100%;
        -webkit-transform: rotateZ(180deg); 
    }    
    
}

@-webkit-keyframes expandIn {
    from {
        -webkit-transform: scale(0);
    }

    50% {
        
        -webkit-transform: scale(1);
    }

    75% {
        -webkit-transform: scale(1.2);
    }

    to {
        -webkit-transform: scale(1);
    }
}

@-webkit-keyframes collapseOut {
    to {
        -webkit-transform: scale(0);
    }
}