/**
 * animation.css
 *
 * CSS动画定义与调用
 */

/*--------------------------------------------------------------------------
CSS动画定义
--------------------------------------------------------------------------*/

/*
home-productcase
*/

@keyframes caseTitScale {
    from { 
        transform: scale( 0, 0 ) translate( 0, 350% );
        -webkit-transform: scale( 0, 0 ) translate( 0, 350% );
        -ms-transform: scale( 0, 0 ) translate( 0, 350% );
    }
    to { 
        transform: scale( 1, 1 ) translate( 0, 0 );
        -webkit-transform: scale( 1, 1 ) translate( 0, 0 );
        -ms-transform: scale( 1, 1 ) translate( 0, 0 );
    }
}

@-webkit-keyframes caseTitScale {
    from { 
        transform: scale( 0, 0 ) translate( 0, 350% );
        -webkit-transform: scale( 0, 0 ) translate( 0, 350% );
        -ms-transform: scale( 0, 0 ) translate( 0, 350% );
    }
    to { 
        transform: scale( 1, 1 ) translate( 0, 0 );
        -webkit-transform: scale( 1, 1 ) translate( 0, 0 );
        -ms-transform: scale( 1, 1 ) translate( 0, 0 );
    }
}

@keyframes caseIndex {
    from { z-index: -999; }
    to { z-index: 0; }
}

@-webkit-keyframes caseIndex {
    from { z-index: -999; }
    to { z-index: 0; }
}

@keyframes caseRotate {
    from { transform: translate( 0, 120% ); -webkit-transform: translate( 0, 120% ); -ms-transform: translate( 0, 120% ); }
    to { transform: translate( 0, 0 ); -webkit-transform: translate( 0, 0 ); -ms-transform: translate( 0, 0 ); }
}

@-webkit-keyframes caseRotate {
    from { transform: translate( 0, 120% ); -webkit-transform: translate( 0, 120% ); -ms-transform: translate( 0, 120% ); }
    to { transform: translate( 0, 0 ); -webkit-transform: translate( 0, 0 ); -ms-transform: translate( 0, 0 ); }
}

/*--------------------------------------------------------------------------
CSS动画调用
--------------------------------------------------------------------------*/

/*
home-productcase
*/

@media screen and ( min-width: 931px ) {
    .productcase-scale {
        animation-name: caseTitScale;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: both;
        -webkit-animation-name: caseTitScale;
        -webkit-animation-duration: 1s;
        -webkit-animation-delay: 1s;
        -webkit-animation-fill-mode: both;
    }

    .productcase-index {
        position: relative;
        animation-name: caseIndex;
        animation-duration: 1s;
        animation-delay: 0.8s;
        animation-fill-mode: both;
        -webkit-animation-name: caseIndex;
        -webkit-animation-duration: 1s;
        -webkit-animation-delay: 0.8s;
        -webkit-animation-fill-mode: both;
    }

    .productcase-rotate {
        animation-name: caseRotate;
        animation-duration: 1s;
        animation-delay: 0.8s;
        animation-fill-mode: both;
        -webkit-animation-name: caseRotate;
        -webkit-animation-duration: 1s;
        -webkit-animation-delay: 0.8s;
        -webkit-animation-fill-mode: both;
    }
}