/* CSS Document */
.animated_b {
	-webkit-animation-duration: 8s;
	   -moz-animation-duration: 8s;
	     -o-animation-duration: 8s;
	        animation-duration: 8s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}

/*围绕X轴前后3D摆动 以 弹；筋斗的方式显示*/
@-webkit-keyframes flipInX {
    0% {
		/*  perspective(400px) 为 3D 转换元素定义透视视图。  rotateX(90deg) 定义沿着 X 轴的 3D 旋转。*/
        -webkit-transform: perspective(800px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -webkit-transform: perspective(800px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(800px) rotateX(10deg);
    }
    
    100% {
        -webkit-transform: perspective(800px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(800px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -moz-transform: perspective(800px) rotateX(-10deg);
    }
    
    70% {
        -moz-transform: perspective(800px) rotateX(10deg);
    }
    
    100% {
        -moz-transform: perspective(800px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(800px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -o-transform: perspective(800px) rotateX(-10deg);
    }
    
    70% {
        -o-transform: perspective(800px) rotateX(10deg);
    }
    
    100% {
        -o-transform: perspective(800px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        transform: perspective(800px) rotateX(-10deg);
    }
    
    70% {
        transform: perspective(800px) rotateX(10deg);
    }
    
    100% {
        transform: perspective(800px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
	/*backface-visibility 属性定义当元素不面向屏幕时是否可见。visible 背面是可见的。   !important不重要的*/
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInX;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipInX;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipInX;
	backface-visibility: visible !important;
	animation-name: flipInX;
}

/*围绕X轴前后3D摆动 以 弹；筋斗的方式隐藏*/
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@-moz-keyframes flipOutX {
    0% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@-o-keyframes flipOutX {
    0% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

.flipOutX {
	-webkit-animation-name: flipOutX;
	-webkit-backface-visibility: visible !important;
	-moz-animation-name: flipOutX;
	-moz-backface-visibility: visible !important;
	-o-animation-name: flipOutX;
	-o-backface-visibility: visible !important;
	animation-name: flipOutX;
	backface-visibility: visible !important;
}