tv_xiaoyouxi/games/dbcs/images/animation.css

@CHARSET "UTF-8";

	.animation-next{
	-webkit-animation:fadeInRight .5s ease-in forwards;
	-moz-animation:fadeInRight .5s ease-in forwards;
	}
	@-webkit-keyframes fadeInRight{
		0%{opacity:0;-webkit-transform:translateX(100px)}
        20%{opacity:0.2;-webkit-transform:translateX(50px)}
		40%{opacity:0.4;-webkit-transform:translateX(20px)}
		60%{opacity:0.6;-webkit-transform:translateX(10px)}
		80%{opacity:0.8;-webkit-transform:translateX(5px)}
		100%{opacity:1;-webkit-transform:translateX(0)}
	}
		
	.animation-rotateOut{
	    -webkit-animation:rotateOut 5s .2s ease infinite;
	    -moz-animation:rotateOut 5s .2s ease infinite;}
	@-webkit-keyframes rotateOut{
	   0%{-webkit-transform:rotateY(0);opacity:1}
	   100%{-webkit-transform:rotateY(-360deg);}
	}
	@-moz-keyframes rotateOut{
	   0%{-webkit-transform:rotateY(0);opacity:1}
	   100%{-webkit-transform:rotateY(-360deg);}
	}
	
	.animation-rotateup{
	    -webkit-animation:rotateup 3s .2s ease ;
	    -moz-animation:rotateup 3s .2s ease ;}
	@-webkit-keyframes rotateup{
	            0%{-webkit-transform:rotateX(0);}
	            100%{-webkit-transform:rotateX(-360deg);}
	}
	@-moz-keyframes rotateup{
	   0%{-webkit-transform:rotateX(0);}
	   100%{-webkit-transform:rotateX(-360deg);}
	}
	
	
	.animation-bounceOut{
	-webkit-animation:bounceOut 1s .2s ease both;
	-moz-animation:bounceOut 1s .2s ease both;
	}
	@-webkit-keyframes bounceOut{
		0%{-webkit-transform:scale(1)}
		25%{-webkit-transform:scale(.95)}
		50%{opacity:1;-webkit-transform:scale(1.1)}
		100%{opacity:0;-webkit-transform:scale(.3)}
	}
	@-moz-keyframes bounceOut{
		0%{-webkit-transform:scale(1)}
		25%{-webkit-transform:scale(.95)}
		50%{opacity:1;-webkit-transform:scale(1.1)}
		100%{opacity:0;-webkit-transform:scale(.3)}
	}
	
    .animation-share{
        -webkit-animation:define 1s .1s  infinite ;
    }
    @-webkit-keyframes define{
        0%   { right:0px; top:0px;}
        50%  { right:0px; top:20px;}
        100%  { right:0px; top:0px;}
    }
    
	.animation-bounceInUp{
	-webkit-animation:bounceInUp 1s .2s ease both;
	-moz-animation:bounceInUp 1s .2s ease both;
	}
	@-webkit-keyframes bounceInUp{
		-webkit-transform:scale(-1,1);
	    transform-origin:center top;
	}
	@-moz-keyframes bounceInUp{
		0%{opacity:0;-moz-transform:translateY(2000px)}
		60%{opacity:1;-moz-transform:translateY(-30px)}
		80%{-moz-transform:translateY(10px)}
		100%{-moz-transform:translateY(0)}
	}
	
	.animation-flipOutX{
	-webkit-animation:flipOutX 1s .2s ease-in both;
	-moz-animation:flipOutX 1s .2s ease-in both;}
	@-webkit-keyframes flipOutX{    
		0%{-webkit-transform:perspective(0px) rotateX(0deg);opacity:1;transform-origin:center top;}
		50%{-webkit-transform:perspective(0px) rotateX(45deg);opacity:0.5;transform-origin:center top;}
        100%{-webkit-transform:perspective(0px) rotateX(90deg);opacity:0;transform-origin:center top;}
	}
	@-moz-keyframes flipOutX{
		0%{-moz-transform:perspective(0px) rotateX(0deg);opacity:1}
		100%{-moz-transform:perspective(00px) rotateX(90deg);opacity:0}
	}
	
	.animation-breath{
		-webkit-animation:breath 2s ease-in-out infinite;
	    -moz-animation:breath 2s ease-in-out infinite;
    }
    @-webkit-keyframes breath {
            0% { opacity: 0.4; }                          
            50%  { opacity: 1; }                       
            100%   { opacity: 0.4; }
        }
   @-moz-keyframes breath {
            from { opacity: 0.4;  -webkit-box-shadow:0 0 5px #ccc; }       
            50%  { opacity:   1; -webkit-box-shadow: 0 0 10px #398B08; }                 
            to   { opacity: 0.4;  -webkit-box-shadow:0 0 5px #ccc;}
        }