• CSS3动画效果


    /************动画效果**************/
    .fade{
    	animation:fade 2s infinite;
    	-webkit-animation:fade 2s infinite;
    	-moz-animation:fade 2s infinite;
    	-ms-animation:fade 2s infinite;
    	-o-animation:fade 2s infinite;
    }
    
    
    @keyframes fade {
    	0%{
    		opacity: 0.2;
    	}
    	50%{
    		opacity: 1;
    	}
    	100%{
    		opacity: 0.2;
    	}
    }
    
    @-webkit-keyframes fade {
    	0%{
    		opacity: 0.2;
    	}
    	50%{
    		opacity: 1;
    	}
    	100%{
    		opacity: 0.2;
    	}
    }
    
    @-moz-keyframes fade {
    	0%{
    		opacity: 0.2;
    	}
    	50%{
    		opacity: 1;
    	}
    	100%{
    		opacity: 0.2;
    	}
    }
    
    @-ms-keyframes fade {
    	0%{
    		opacity: 0.2;
    	}
    	50%{
    		opacity: 1;
    	}
    	100%{
    		opacity: 0.2;
    	}
    }
    
    @-o-keyframes fade {
    	0%{
    		opacity: 0.2;
    	}
    	50%{
    		opacity: 1;
    	}
    	100%{
    		opacity: 0.2;
    	}
    }
    
    
    
    
    /**
     * 动画效果1
     * 淡入
     */
    .fadeIn {
    	-webkit-animation:fadeIn 2s ease 0s 1 both;
    	-moz-animation:fadeIn 2s ease 0s 1 both;
    	-ms-animation:fadeIn 2s ease 0s 1 both;
    	-o-animation:fadeIn 2s ease 0s 1 both;
    	animation:fadeIn 2s ease 0s 1 both;
    }
    @keyframes fadeIn {
    	0%{
    		opacity: 0;
    	}
    	100%{
    		opacity: 1;
    	}
    }
    
    @-webkit-keyframes fadeIn {
    	0%{
    		opacity: 0;
    	}
    	100%{
    		opacity: 1;
    	}
    }
    
    @-moz-keyframes fadeIn {
    	0%{
    		opacity: 0;
    	}
    	100%{
    		opacity: 1;
    	}
    }
    
    @-ms-keyframes fadeIn {
    	0%{
    		opacity: 0;
    	}
    	100%{
    		opacity: 1;
    	}
    }
    
    @-o-keyframes fadeIn {
    	0%{
    		opacity: 0;
    	}
    	100%{
    		opacity: 1;
    	}
    }
    
    
    /**
     * 从左到右 淡入
     */
    .fadeInRight {
    	-webkit-animation:fadeInRight 2s ease 0s 1 both;
    	-moz-animation:fadeInRight 2s ease 0s 1 both;
    	-ms-animation:fadeInRight 2s ease 0s 1 both;
    	-o-animation:fadeInRight 2s ease 0s 1 both;
    	animation:fadeInRight 2s ease 0s 1 both;
    }
    
    @keyframes fadeInRight {
    	0%{
    		opacity: 0;
    		transform: translate3d(-100%, 0, 0);
    	}
    	100%{
    		opacity: 1;
    		transform: none
    	}
    }
    
    @-webkit-keyframes fadeInRight {
    	0%{
    		opacity: 0;
    		-webkit-transform: translate3d(-100%, 0, 0);
    	}
    	100%{
    		opacity: 1;
    		-webkit-transform: none;
    	}
    }
    
    @-moz-keyframes fadeInRight {
    	0%{
    		opacity: 0;
    		-moz-transform: translate3d(-100%, 0, 0);
    	}
    	100%{
    		opacity: 1;
    		-moz-transform: none;
    	}
    }
    
    @-ms-keyframes fadeInRight {
    	0%{
    		opacity: 0;
    		-ms-transform: translate3d(-100%, 0, 0);
    	}
    	100%{
    		opacity: 1;
    		-ms-transform: none;
    	}
    }
    
    @-o-keyframes fadeInRight {
    	0%{
    		opacity: 0;
    		-o-transform: translate3d(-100%, 0, 0);
    	}
    	100%{
    		opacity: 1;
    		-o-transform: none;
    	}
    }
    
    /**
     * 从右到左 淡入
     */
    .fadeInLeft {
    	-webkit-animation:fadeInLeft 2s ease 0s 1 both;
    	-moz-animation:fadeInLeft 2s ease 0s 1 both;
    	-ms-animation:fadeInLeft 2s ease 0s 1 both;
    	-o-animation:fadeInLeft 2s ease 0s 1 both;
    	animation:fadeInLeft 2s ease 0s 1 both;
    }
    
    @keyframes fadeInLeft {
    	0%{
    		opacity: 0;
    		transform: translate3d(100%, 0, 0);
    	}
    	100%{
    		opacity: 1;
    		transform: none
    	}
    }
    @-webkit-keyframes fadeInLeft {
    	0%{
    		opacity: 0;
    		-webkit-transform: translate3d(100%, 0, 0);
    	}
    	100%{
    		opacity: 1;
    		-webkit-transform: none;
    	}
    }
    @-moz-keyframes fadeInLeft {
    	0%{
    		opacity: 0;
    		-moz-transform: translate3d(100%, 0, 0);
    	}
    	100%{
    		opacity: 1;
    		-moz-transform: none;
    	}
    }
    @-ms-keyframes fadeInLeft {
    	0%{
    		opacity: 0;
    		-ms-transform: translate3d(100%, 0, 0);
    	}
    	100%{
    		opacity: 1;
    		-ms-transform: none;
    	}
    }
    @-o-keyframes fadeInLeft {
    	0%{
    		opacity: 0;
    		-o-transform: translate3d(100%, 0, 0);
    	}
    	100%{
    		opacity: 1;
    		-o-transform: none;
    	}
    }
    
    /**
     * 从下到上 淡入
     */
    .fadeInUp {
    	-webkit-animation:fadeInUp 2s ease 0s 1 both;
    	-moz-animation:fadeInUp 2s ease 0s 1 both;
    	-ms-animation:fadeInUp 2s ease 0s 1 both;
    	-o-animation:fadeInUp 2s ease 0s 1 both;
    	animation:fadeInUp 2s ease 0s 1 both;
    }
    
    @keyframes fadeInUp {
    	0%{
    		opacity: 0;
    		transform: translate3d(0, 100%, 0);
    	}
    	100%{
    		opacity: 1;
    		transform: none;
    	}
    }
    
    @-webkit-keyframes fadeInUp {
    	0%{
    		opacity: 0;
    		-webkit-transform: translate3d(0, 100%, 0);
    	}
    	100%{
    		opacity: 1;
    		-webkit-transform: none;
    	}
    }
    
    @-moz-keyframes fadeInUp {
    	0%{
    		opacity: 0;
    		-moz-transform: translate3d(0, 100%, 0);
    	}
    	100%{
    		opacity: 1;
    		-moz-transform: none;
    	}
    }
    
    @-ms-keyframes fadeInUp {
    	0%{
    		opacity: 0;
    		-ms-transform: translate3d(0, 100%, 0);
    	}
    	100%{
    		opacity: 1;
    		-ms-transform: none;
    	}
    }
    
    @-o-keyframes fadeInUp {
    	0%{
    		opacity: 0;
    		-o-transform: translate3d(0, 100%, 0);
    	}
    	100%{
    		opacity: 1;
    		-o-transform: none;
    	}
    }
    
    /**
     * 从上到下 淡入
     */
    .fadeInDown {
    	-webkit-animation:fadeInDown 2s ease 0s 1 both;
    	-moz-animation:fadeInDown 2s ease 0s 1 both;
    	-ms-animation:fadeInDown 2s ease 0s 1 both;
    	-o-animation:fadeInDown 2s ease 0s 1 both;
    	animation:fadeInDown 2s ease 0s 1 both;
    }
    
    @keyframes fadeInDown {
    	0%{
    		opacity: 0;
    		transform: translate3d(0, -100%, 0);
    	}
    	100%{
    		opacity: 1;
    		transform: none;
    	}
    }
    
    @-webkit-keyframes fadeInDown {
    	0%{
    		opacity: 0;
    		-webkit-transform: translate3d(0, -100%, 0);
    	}
    	100%{
    		opacity: 1;
    		-webkit-transform: none;
    	}
    }
    
    @-moz-keyframes fadeInDown {
    	0%{
    		opacity: 0;
    		-moz-transform: translate3d(0, -100%, 0);
    	}
    	100%{
    		opacity: 1;
    		-moz-transform: none;
    	}
    }
    
    @-ms-keyframes fadeInDown {
    	0%{
    		opacity: 0;
    		-ms-transform: translate3d(0, -100%, 0);
    	}
    	100%{
    		opacity: 1;
    		-ms-transform: none;
    	}
    }
    
    @-o-keyframes fadeInDown {
    	0%{
    		opacity: 0;
    		-o-transform: translate3d(0, -100%, 0);
    	}
    	100%{
    		opacity: 1;
    		-o-transform: none;
    	}
    }
    
    /**
     * 动画效果 2 淡出
     */
    .fadeOut {
    	-webkit-animation:fadeOut 2s ease 0s 1 both;
    	-moz-animation:fadeOut 2s ease 0s 1 both;
    	-ms-animation:fadeOut 2s ease 0s 1 both;
    	-o-animation:fadeOut 2s ease 0s 1 both;
    	animation:fadeOut 2s ease 0s 1 both;
    }
    @keyframes fadeOut {
    	0%{
    		opacity: 1;
    	}
    	100%{
    		opacity: 0;
    	}
    }
    @-webkit-keyframes fadeOut {
    	0%{
    		opacity: 1;
    	}
    	100%{
    		opacity: 0;
    	}
    }
    @-moz-keyframes fadeOut {
    	0%{
    		opacity: 1;
    	}
    	100%{
    		opacity: 0;
    	}
    }
    @-ms-keyframes fadeOut {
    	0%{
    		opacity: 1;
    	}
    	100%{
    		opacity: 0;
    	}
    }
    @-o-keyframes fadeOut {
    	0%{
    		opacity: 1;
    	}
    	100%{
    		opacity: 0;
    	}
    }
    
    
    
    /**
     * 动画效果3 移入
     */
    
    /**
     * 从左到右 移入
     */
    .moveInRight {
    	-webkit-animation:moveInRight 2s ease 0s 1 both;
    	-moz-animation:moveInRight 2s ease 0s 1 both;
    	-ms-animation:moveInRight 2s ease 0s 1 both;
    	-o-animation:moveInRight 2s ease 0s 1 both;
    	animation:moveInRight 2s ease 0s 1 both;
    }
    
    @keyframes moveInRight {
    	0%{
    		transform: translate3d(-100%, 0, 0);
    	}
    	100%{
    		transform: none;
    	}
    }
    @-webkit-keyframes moveInRight {
    	0%{
    		-webkit-transform: translate3d(-100%, 0, 0);
    	}
    	100%{
    		-webkit-transform: none;
    	}
    }
    @-moz-keyframes moveInRight {
    	0%{
    		-moz-transform: translate3d(-100%, 0, 0);
    	}
    	100%{
    		-moz-transform: none;
    	}
    }
    
    @-ms-keyframes moveInRight {
    	0%{
    		-ms-transform: translate3d(-100%, 0, 0);
    	}
    	100%{
    		-ms-transform: none;
    	}
    }
    
    @-o-keyframes moveInRight {
    	0%{
    		-o-transform: translate3d(-100%, 0, 0);
    	}
    	100%{
    		-o-transform: none;
    	}
    }
    
    
    /**
     * 从右到左 移入
     */
    .moveInLeft {
    	-webkit-animation:moveInLeft 2s ease 0s 1 both;
    	-moz-animation:moveInLeft 2s ease 0s 1 both;
    	-ms-animation:moveInLeft 2s ease 0s 1 both;
    	-o-animation:moveInLeft 2s ease 0s 1 both;
    	animation:moveInLeft 2s ease 0s 1 both;
    }
    
    @keyframes moveInLeft {
    	0%{
    		transform: translate3d(100%, 0, 0);
    	}
    	100%{
    		transform: none;
    	}
    }
    @-webkit-keyframes moveInLeft {
    	0%{
    		-webkit-transform: translate3d(100%, 0, 0);
    	}
    	100%{
    		-webkit-transform: none;
    	}
    }
    @-moz-keyframes moveInLeft {
    	0%{
    		-moz-transform: translate3d(100%, 0, 0);
    	}
    	100%{
    		-moz-transform: none;
    	}
    }
    @-ms-keyframes moveInLeft {
    	0%{
    		-ms-transform: translate3d(100%, 0, 0);
    	}
    	100%{
    		-ms-transform: none;
    	}
    }
    @-o-keyframes moveInLeft {
    	0%{
    		-o-transform: translate3d(100%, 0, 0);
    	}
    	100%{
    		-o-transform: none;
    	}
    }
    
    /**
     * 从下到上 移入
     */
    .moveInUp {
    	-webkit-animation:moveInUp 2s ease 0s 1 both;
    	-moz-animation:moveInUp 2s ease 0s 1 both;
    	-ms-animation:moveInUp 2s ease 0s 1 both;
    	-o-animation:moveInUp 2s ease 0s 1 both;
    	animation:moveInUp 2s ease 0s 1 both;
    }
    
    @keyframes moveInUp {
    	0%{
    		transform: translate3d(0, 100%, 0);
    	}
    	100%{
    		transform: none;
    	}
    }
    
    @-webkit-keyframes moveInUp {
    	0%{
    		-webkit-transform: translate3d(0, 100%, 0);
    	}
    	100%{
    		-webkit-transform: none;
    	}
    }
    
    @-moz-keyframes moveInUp {
    	0%{
    		-moz-transform: translate3d(0, 100%, 0);
    	}
    	100%{
    		-moz-transform: none;
    	}
    }
    @-ms-keyframes moveInUp {
    	0%{
    		-ms-transform: translate3d(0, 100%, 0);
    	}
    	100%{
    		-ms-transform: none;
    	}
    }
    @-o-keyframes moveInUp {
    	0%{
    		-o-transform: translate3d(0, 100%, 0);
    	}
    	100%{
    		-o-transform: none;
    	}
    }
    
    /**
     * 从上到下 移入
     */
    .moveInDown {
    	-webkit-animation:moveInDown 2s ease 0s 1 both;
    	-moz-animation:moveInDown 2s ease 0s 1 both;
    	-ms-animation:moveInDown 2s ease 0s 1 both;
    	-o-animation:moveInDown 2s ease 0s 1 both;
    	animation:moveInDown 2s ease 0s 1 both;
    }
    
    @keyframes moveInDown {
    	0%{
    		transform: translate3d(0, -100%, 0);
    	}
    	100%{
    		transform: none
    	}
    }
    
    @-webkit-keyframes moveInDown {
    	0%{
    		-webkit-transform: translate3d(0, -100%, 0);
    	}
    	100%{
    		-webkit-transform: none
    	}
    }
    
    @-moz-keyframes moveInDown {
    	0%{
    		-moz-transform: translate3d(0, -100%, 0);
    	}
    	100%{
    		-moz-transform: none
    	}
    }
    
    @-ms-keyframes moveInDown {
    	0%{
    		-ms-transform: translate3d(0, -100%, 0);
    	}
    	100%{
    		-ms-transform: none
    	}
    }
    
    @-o-keyframes moveInDown {
    	0%{
    		-o-transform: translate3d(0, -100%, 0);
    	}
    	100%{
    		-o-transform: none
    	}
    }
    
    /**
     * 	从上移出 
     */
    
    @keyframes moveOutUp {
    	0%{
    		transform: none;
    	}
    	100%{
    		transform: translate3d(0, -100%, 0);
    	}
    }
    
    @-webkit-keyframes moveOutUp {
    	0%{
    		-webkit-transform: none;
    	}
    	100%{
    		-webkit-transform: translate3d(0, -100%, 0);
    		
    	}
    }
    
    @-moz-keyframes moveOutUp {
    	0%{
    		-moz-transform: none;
    	}
    	100%{
    		-moz-transform: translate3d(0, -100%, 0);
    	}
    }
    @-ms-keyframes moveOutUp {
    	0%{
    		-ms-transform: none;
    	}
    	100%{
    		-ms-transform: translate3d(0, -100%, 0);
    	}
    }
    @-o-keyframes moveOutUp {
    	0%{
    		-o-transform: none;
    	}
    	100%{
    		-o-transform: translate3d(0, -100%, 0);
    	}
    }
    
    @keyframes moveOutDown {
    	0%{
    		transform: none
    	}
    	100%{
    		transform: translate3d(0, 100%, 0);
    	}
    }
    
    @-webkit-keyframes moveOutDown {
    	0%{
    		-webkit-transform: none
    	}
    	100%{
    		-webkit-transform: translate3d(0, 100%, 0);
    	}
    }
    
    @-moz-keyframes moveOutDown {
    	0%{
    		-moz-transform: none
    	}
    	100%{
    		-moz-transform: translate3d(0, 100%, 0);
    	}
    }
    
    @-ms-keyframes moveOutDown {
    	0%{
    		-ms-transform: none
    	}
    	100%{
    		-ms-transform: translate3d(0, 100%, 0);
    	}
    }
    
    @-o-keyframes moveOutDown {
    	0%{
    		-o-transform: none
    	}
    	100%{
    		-o-transform: translate3d(0, 100%, 0);
    	}
    }
    
    
    /**
     * 动画效果4 
     * 中心弹入 
     */
    .bounceIn {
    	-webkit-animation:bounceIn 2s ease 0s 1 both;
    	-moz-animation:bounceIn 2s ease 0s 1 both;
    	-ms-animation:bounceIn 2s ease 0s 1 both;
    	-o-animation:bounceIn 2s ease 0s 1 both;
    	animation:bounceIn 2s ease 0s 1 both;
    }
    @keyframes bounceIn {
    	0%, 20%, 40%, 60%, 80%, 100%{
    		transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		transform: scale3d(.3, .3, .3);
    	}
    	20%{
    		transform: scale3d(1.1, 1.1, 1.1);
    	}
    	40%{
    		transform: scale3d(.9, .9, .9);
    	}
    	60%{
    		opacity: 1;
    		transform: scale3d(1.03, 1.03, 1.03);
    	}
    	80%{
    		transform: scale3d(.97, .97, .97);
    	}
    	100%{
    		opacity: 1;
    		transform: scale3d(1, 1, 1);
    	}
    }
    
    @-webkit-keyframes bounceIn {
    	0%, 20%, 40%, 60%, 80%, 100%{
    		-webkit-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		-webkit-transform: scale3d(.3, .3, .3);
    	}
    	20%{
    		-webkit-transform: scale3d(1.1, 1.1, 1.1);
    	}
    	40%{
    		-webkit-transform: scale3d(.9, .9, .9);
    	}
    	60%{
    		opacity: 1;
    		-webkit-transform: scale3d(1.03, 1.03, 1.03);
    	}
    	80%{
    		-webkit-transform: scale3d(.97, .97, .97);
    	}
    	100%{
    		opacity: 1;
    		-webkit-transform: scale3d(1, 1, 1);
    	}
    }
    
    @-moz-keyframes bounceIn {
    	0%, 20%, 40%, 60%, 80%, 100%{
    		-moz-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		-moz-transform: scale3d(.3, .3, .3);
    	}
    	20%{
    		-moz-transform: scale3d(1.1, 1.1, 1.1);
    	}
    	40%{
    		-moz-transform: scale3d(.9, .9, .9);
    	}
    	60%{
    		opacity: 1;
    		-moz-transform: scale3d(1.03, 1.03, 1.03);
    	}
    	80%{
    		-moz-transform: scale3d(.97, .97, .97);
    	}
    	100%{
    		opacity: 1;
    		-moz-transform: scale3d(1, 1, 1);
    	}
    }
    
    @-ms-keyframes bounceIn {
    	0%, 20%, 40%, 60%, 80%, 100%{
    		-ms-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		-ms-transform: scale3d(.3, .3, .3);
    	}
    	20%{
    		-ms-transform: scale3d(1.1, 1.1, 1.1);
    	}
    	40%{
    		-ms-transform: scale3d(.9, .9, .9);
    	}
    	60%{
    		opacity: 1;
    		-ms-transform: scale3d(1.03, 1.03, 1.03);
    	}
    	80%{
    		-ms-transform: scale3d(.97, .97, .97);
    	}
    	100%{
    		opacity: 1;
    		-ms-transform: scale3d(1, 1, 1);
    	}
    }
    
    @-o-keyframes bounceIn {
    	0%, 20%, 40%, 60%, 80%, 100%{
    		-o-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		-o-transform: scale3d(.3, .3, .3);
    	}
    	20%{
    		-o-transform: scale3d(1.1, 1.1, 1.1);
    	}
    	40%{
    		-o-transform: scale3d(.9, .9, .9);
    	}
    	60%{
    		opacity: 1;
    		-o-transform: scale3d(1.03, 1.03, 1.03);
    	}
    	80%{
    		-o-transform: scale3d(.97, .97, .97);
    	}
    	100%{
    		opacity: 1;
    		-o-transform: scale3d(1, 1, 1);
    	}
    }
    
    /**
     * 	弹入 从左到右
     */
    .bounceInRight {
    	-webkit-animation:bounceInRight 2s ease 0s 1 both;
    	-moz-animation:bounceInRight 2s ease 0s 1 both;
    	-ms-animation:bounceInRight 2s ease 0s 1 both;
    	-o-animation:bounceInRight 2s ease 0s 1 both;
    	animation:bounceInRight 2s ease 0s 1 both;
    }
    
    @keyframes bounceInRight{
    	0% , 60% , 75% , 90% , 100% {
    		transition-timing-function:cubic- bezier(0.215, .610, .355, 1.000);
    	}
    	0% {
    		opacity: 0;
    		transform: translate3d(-3000px, 0, 0);
    	}
    	60% {
    		opacity: 1;
    		transform: translate3d(25px, 0, 0);
    	}
    	75% {
    		transform: translate3d(-10px, 0, 0);
    	}
    	90% {
    		transform: translate3d(5px, 0, 0);
    	}
    	100% {
    		transform: none
    	}
    }
    @-webkit-keyframes bounceInRight {
    	0% , 60% , 75% , 90% , 100%{
    		-webkit-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0% {
    		opacity: 0;
    		-webkit-transform: translate3d(-3000px, 0, 0);
    	}
    	60% {
    		opacity: 1;
    		-webkit-transform: translate3d(25px, 0, 0);
    	}
    	75% {
    		-webkit-transform: translate3d(-10px, 0, 0);
    	}
    	90% {
    		-webkit-transform: translate3d(5px, 0, 0);
    	}
    	100% {
    		-webkit-transform: none;
    	}
    }
    @-moz-keyframes bounceInRight {
    	0% , 60% , 75% , 90% , 100%{
    		-moz-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0% {
    		opacity: 0;
    		-moz-transform: translate3d(-3000px, 0, 0);
    	}
    	60% {
    		opacity: 1;
    		-moz-transform: translate3d(25px, 0, 0);
    	}
    	75% {
    		-moz-transform: translate3d(-10px, 0, 0);
    	}
    	90% {
    		-moz-transform: translate3d(5px, 0, 0);
    	}
    	100% {
    		-moz-transform: none;
    	}
    }
    @-ms-keyframes bounceInRight {
    	0% , 60% , 75% , 90% , 100%{
    		-ms-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0% {
    		opacity: 0;
    		-ms-transform: translate3d(-3000px, 0, 0);
    	}
    	60% {
    		opacity: 1;
    		-ms-transform: translate3d(25px, 0, 0);
    	}
    	75% {
    		-ms-transform: translate3d(-10px, 0, 0);
    	}
    	90% {
    		-ms-transform: translate3d(5px, 0, 0);
    	}
    	100% {
    		-ms-transform: none;
    	}
    }
    @-o-keyframes bounceInRight {
    	0% , 60% , 75% , 90% , 100%{
    		-o-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0% {
    		opacity: 0;
    		-o-transform: translate3d(-3000px, 0, 0);
    	}
    	60% {
    		opacity: 1;
    		-o-transform: translate3d(25px, 0, 0);
    	}
    	75% {
    		-o-transform: translate3d(-10px, 0, 0);
    	}
    	90% {
    		-o-transform: translate3d(5px, 0, 0);
    	}
    	100% {
    		-o-transform: none;
    	}
    }
    
    /**
     * 	弹入 从右到左
     */
    .bounceInLeft {
    	-webkit-animation:bounceInLeft 2s ease 0s 1 both;
    	-moz-animation:bounceInLeft 2s ease 0s 1 both;
    	-ms-animation:bounceInLeft 2s ease 0s 1 both;
    	-o-animation:bounceInLeft 2s ease 0s 1 both;
    	animation:bounceInLeft 2s ease 0s 1 both;
    }
    
    @keyframes bounceInLeft {
    	0%, 60%, 75% , 90%, 100%{
    		transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000)
    	}
    	0%{
    		opacity: 0;
    		transform: translate3d(3000px, 0, 0);
    	}
    	60%{
    		opacity: 1;
    		transform: translate3d(-25px, 0, 0);
    	}
    	75% {
    		transform: translate3d(10px, 0, 0);
    	}
    	90%{
    		transform: translate3d(-5px, 0, 0);
    	}
    	100%{
    		transform: none;
    	}
    }
    
    @-webkit-keyframes bounceInLeft {
    	0%, 60%, 75%, 90%, 100%{
    		-webkit-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		-webkit-transform: translate3d(3000px, 0, 0);
    	}
    	60%{
    		opacity: 1;
    		-webkit-transform: translate3d(-25px, 0, 0);
    	}
    	75% {
    		-webkit-transform: translate3d(10px, 0, 0);
    	}
    	90%{
    		-webkit-transform: translate3d(-5px, 0, 0);
    	}
    	100%{
    		-webkit-transform: none;
    	}
    }
    
    @-moz-keyframes bounceInLeft {
    	0%, 60%, 75%, 90%, 100%{
    		-moz-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		-moz-transform: translate3d(3000px, 0, 0);
    	}
    	60%{
    		opacity: 1;
    		-moz-transform: translate3d(-25px, 0, 0);
    	}
    	75% {
    		-moz-transform: translate3d(10px, 0, 0);
    	}
    	90%{
    		-moz-transform: translate3d(-5px, 0, 0);
    	}
    	100%{
    		-moz-transform: none;
    	}
    }
    
    @-ms-keyframes bounceInLeft {
    	0%, 60%, 75%, 90%, 100%{
    		-ms-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		-ms-transform: translate3d(3000px, 0, 0);
    	}
    	60%{
    		opacity: 1;
    		-ms-transform: translate3d(-25px, 0, 0);
    	}
    	75% {
    		-ms-transform: translate3d(10px, 0, 0);
    	}
    	90%{
    		-ms-transform: translate3d(-5px, 0, 0);
    	}
    	100%{
    		-ms-transform: none;
    	}
    }
    
    @-o-keyframes bounceInLeft {
    	0%, 60%, 75%, 90%, 100%{
    		-o-transition-timing-function:cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		-o-transform: translate3d(3000px, 0, 0);
    	}
    	60%{
    		opacity: 1;
    		-o-transform: translate3d(-25px, 0, 0);
    	}
    	75% {
    		-o-transform: translate3d(10px, 0, 0);
    	}
    	90%{
    		-o-transform: translate3d(-5px, 0, 0);
    	}
    	100%{
    		-o-transform: none;
    	}
    }
    
    /**
     * 	弹出 从下到上
     */
    .bounceInUp {
    	-webkit-animation:bounceInUp 2s ease 0s 1 both;
    	-moz-animation:bounceInUp 2s ease 0s 1 both;
    	-ms-animation:bounceInUp 2s ease 0s 1 both;
    	-o-animation:bounceInUp 2s ease 0s 1 both;
    	animation:bounceInUp 2s ease 0s 1 both;
    }
    
    @keyframes bounceInUp {
    	0%, 60%, 75% , 90%, 100%{
    		transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000)
    	}
    	0%{
    		opacity: 0;
    		transform: translate3d(0, 3000px, 0);
    	}
    	60%{
    		opacity: 1;
    		transform: translate3d(0, -25px, 0);
    	}
    	75% {
    		transform: translate3d(0, 10px, 0);
    	}
    	90%{
    		transform: translate3d(0, -5px, 0);
    	}
    	100%{
    		transform: none
    	}
    }
    
    @-webkit-keyframes bounceInUp {
    	0%, 60%, 75% , 90%, 100%{
    		-webkit-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		-webkit-transform: translate3d(0, 3000px, 0);
    	}
    	60%{
    		opacity: 1;
    		-webkit-transform: translate3d(0, -25px, 0);
    	}
    	75% {
    		-webkit-transform: translate3d(0, 10px, 0);
    	}
    	90%{
    		-webkit-transform: translate3d(0, -5px, 0);
    	}
    	100%{
    		-webkit-transform: none;
    	}
    }
    
    @-moz-keyframes bounceInUp {
    	0%, 60%, 75% , 90%, 100%{
    		-moz-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		-moz-transform: translate3d(0, 3000px, 0);
    	}
    	60%{
    		opacity: 1;
    		-moz-transform: translate3d(0, -25px, 0);
    	}
    	75% {
    		-moz-transform: translate3d(0, 10px, 0);
    	}
    	90%{
    		-moz-transform: translate3d(0, -5px, 0);
    	}
    	100%{
    		-moz-transform: none;
    	}
    }
    
    @-ms-keyframes bounceInUp {
    	0%, 60%, 75% , 90%, 100%{
    		-ms-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		-ms-transform: translate3d(0, 3000px, 0);
    	}
    	60%{
    		opacity: 1;
    		-ms-transform: translate3d(0, -25px, 0);
    	}
    	75% {
    		-ms-transform: translate3d(0, 10px, 0);
    	}
    	90%{
    		-ms-transform: translate3d(0, -5px, 0);
    	}
    	100%{
    		-ms-transform: none;
    	}
    }
    
    @-o-keyframes bounceInUp {
    	0%, 60%, 75% , 90%, 100%{
    		-o-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		-o-transform: translate3d(0, 3000px, 0);
    	}
    	60%{
    		opacity: 1;
    		-o-transform: translate3d(0, -25px, 0);
    	}
    	75% {
    		-o-transform: translate3d(0, 10px, 0);
    	}
    	90%{
    		-o-transform: translate3d(0, -5px, 0);
    	}
    	100%{
    		-o-transform: none;
    	}
    }
    
    
    /**
     * 	弹入 从上到下
     */
    .bounceInDown {
    	-webkit-animation:bounceInDown 2s ease 0s 1 both;
    	-moz-animation:bounceInDown 2s ease 0s 1 both;
    	-ms-animation:bounceInDown 2s ease 0s 1 both;
    	-o-animation:bounceInDown 2s ease 0s 1 both;
    	animation:bounceInDown 2s ease 0s 1 both;
    }
    
    @keyframes bounceInDown {
    	0%, 60%, 75% , 90%, 100%{
    		transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		transform: translate3d(0, -3000px, 0);
    	}
    	60%{
    		opacity: 1;
    		transform: translate3d(0, 25px, 0);
    	}
    	75% {
    		transform: translate3d(0, -10px, 0);
    	}
    	90%{
    		transform: translate3d(0, 5px, 0);
    	}
    	100%{
    		transform: none;
    	}
    }
    
    @-webkit-keyframes bounceInDown {
    	0%, 60%, 75% , 90%, 100%{
    		-webkit-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		-webkit-transform: translate3d(0, -3000px, 0);
    	}
    	60%{
    		opacity: 1;
    		-webkit-transform: translate3d(0, 25px, 0);
    	}
    	75% {
    		-webkit-transform: translate3d(0, -10px, 0);
    	}
    	90%{
    		-webkit-transform: translate3d(0, 5px, 0);
    	}
    	100%{
    		-webkit-transform: none;
    	}
    }
    
    @-moz-keyframes bounceInDown {
    	0%, 60%, 75% , 90%, 100%{
    		-moz-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		-moz-transform: translate3d(0, -3000px, 0);
    	}
    	60%{
    		opacity: 1;
    		-moz-transform: translate3d(0, 25px, 0);
    	}
    	75% {
    		-moz-transform: translate3d(0, -10px, 0);
    	}
    	90%{
    		-moz-transform: translate3d(0, 5px, 0);
    	}
    	100%{
    		-moz-transform: none;
    	}
    }
    
    @-ms-keyframes bounceInDown {
    	0%, 60%, 75% , 90%, 100%{
    		-ms-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		-ms-transform: translate3d(0, -3000px, 0);
    	}
    	60%{
    		opacity: 1;
    		-ms-transform: translate3d(0, 25px, 0);
    	}
    	75% {
    		-ms-transform: translate3d(0, -10px, 0);
    	}
    	90%{
    		-ms-transform: translate3d(0, 5px, 0);
    	}
    	100%{
    		-ms-transform: none;
    	}
    }
    
    @-o-keyframes bounceInDown {
    	0%, 60%, 75% , 90%, 100%{
    		-o-transition-timing-function :cubic-bezier(0.215, .610, .355, 1.000);
    	}
    	0%{
    		opacity: 0;
    		-o-transform: translate3d(0, -3000px, 0);
    	}
    	60%{
    		opacity: 1;
    		-o-transform: translate3d(0, 25px, 0);
    	}
    	75% {
    		-o-transform: translate3d(0, -10px, 0);
    	}
    	90%{
    		-o-transform: translate3d(0, 5px, 0);
    	}
    	100%{
    		-o-transform: none;
    	}
    }
    
    
    /**
     * 动画效果5 放大
     */
    .zoomIn {
    	-webkit-animation:zoomIn 2s ease 0s 1 both;
    	-moz-animation:zoomIn 2s ease 0s 1 both;
    	-ms-animation:zoomIn 2s ease 0s 1 both;
    	-o-animation:zoomIn 2s ease 0s 1 both;
    	animation:zoomIn 2s ease 0s 1 both;
    }
    @keyframes zoomIn {
    	0%{
    		opacity: 0;
    		transform: scale3d(.3, .3, .3);
    	}
    	50%{
    		opacity: 1
    	}
    }
    @-webkit-keyframes zoomIn {
    	0%{
    		opacity: 0;
    		-webkit-transform: scale3d(.3, .3, .3);
    	}
    	50%{
    		opacity: 1;
    	}
    }
    @-moz-keyframes zoomIn {
    	0%{
    		opacity: 0;
    		-moz-transform: scale3d(.3, .3, .3);
    	}
    	50%{
    		opacity: 1;
    	}
    }
    @-ms-keyframes zoomIn {
    	0%{
    		opacity: 0;
    		-ms-transform: scale3d(.3, .3, .3);
    	}
    	50%{
    		opacity: 1;
    	}
    }
    @-o-keyframes zoomIn {
    	0%{
    		opacity: 0;
    		-o-transform: scale3d(.3, .3, .3);
    	}
    	50%{
    		opacity: 1;
    	}
    }
    
    
    
    /**
     * 动画效果 6
     * 翻滚进入
     */
    .rollIn {
    	-webkit-animation:rollIn 2s ease 0s 1 both;
    	-moz-animation:rollIn 2s ease 0s 1 both;
    	-ms-animation:rollIn 2s ease 0s 1 both;
    	-o-animation:rollIn 2s ease 0s 1 both;
    	animation:rollIn 2s ease 0s 1 both;
    }
    
    @keyframes rollIn {
    	0%{
    		opacity: 0;
    		transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    	}
    	100%{
    		opacity: 1;
    		transform: none
    	}
    }
    
    @-webkit-keyframes rollIn {
    	0%{
    		opacity: 0;
    		-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    	}
    	100%{
    		opacity: 1;
    		-webkit-transform: none;
    	}
    }
    @-moz-keyframes rollIn {
    	0%{
    		opacity: 0;
    		-moz-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    	}
    	100%{
    		opacity: 1;
    		-moz-transform: none;
    	}
    }
    @-ms-keyframes rollIn {
    	0%{
    		opacity: 0;
    		-ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    	}
    	100%{
    		opacity: 1;
    		-ms-transform: none;
    	}
    }
    @-o-keyframes rollIn {
    	0%{
    		opacity: 0;
    		-o-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    	}
    	100%{
    		opacity: 1;
    		-o-transform: none;
    	}
    }
    
    /**
     * 动画效果7
     * 光速进入
     */
    .lightSpeedIn {
    	-webkit-animation:lightSpeedIn 2s ease 0s 1 both;
    	-moz-animation:lightSpeedIn 2s ease 0s 1 both;
    	-ms-animation:lightSpeedIn 2s ease 0s 1 both;
    	-o-animation:lightSpeedIn 2s ease 0s 1 both;
    	animation:lightSpeedIn 2s ease 0s 1 both;
    }
    
    
    @keyframes lightSpeedIn {
    	0%{
    		transform: translate3d(100%, 0, 0) skewX(-30deg);
    		opacity: 0;
    	}
    	60%{
    		transform: skewX(20deg);
    		opacity: 1;
    	}
    	80%{
    		transform: skewX(-5deg);
    		opacity: 1;
    	}
    	100%{
    		transform: none;
    		opacity: 1
    	}
    }
    
    @-webkit-keyframes lightSpeedIn {
    	0%{
    		-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    		opacity: 0
    	}
    	60%{
    		-webkit-transform: skewX(20deg);
    		opacity: 1
    	}
    	80%{
    		-webkit-transform: skewX(-5deg);
    		opacity: 1
    	}
    	100%{
    		-webkit-transform: none;
    		opacity: 1
    	}
    }
    
    
    @-moz-keyframes lightSpeedIn {
    	0%{
    		-moz-transform: translate3d(100%, 0, 0) skewX(-30deg);
    		opacity: 0
    	}
    	60%{
    		-moz-transform: skewX(20deg);
    		opacity: 1
    	}
    	80%{
    		-moz-transform: skewX(-5deg);
    		opacity: 1
    	}
    	100%{
    		-moz-transform: none;
    		opacity: 1
    	}
    }
    
    
    @-ms-keyframes lightSpeedIn {
    	0%{
    		-ms-transform: translate3d(100%, 0, 0) skewX(-30deg);
    		opacity: 0
    	}
    	60%{
    		-ms-transform: skewX(20deg);
    		opacity: 1
    	}
    	80%{
    		-ms-transform: skewX(-5deg);
    		opacity: 1
    	}
    	100%{
    		-ms-transform: none;
    		opacity: 1
    	}
    }
    
    
    @-o-keyframes lightSpeedIn {
    	0%{
    		-o-transform: translate3d(100%, 0, 0) skewX(-30deg);
    		opacity: 0
    	}
    	60%{
    		-o-transform: skewX(20deg);
    		opacity: 1
    	}
    	80%{
    		-o-transform: skewX(-5deg);
    		opacity: 1
    	}
    	100%{
    		-o-transform: none;
    		opacity: 1
    	}
    }
    
    /**
     * 动画效果8
     * 摇摆
     */
    .wobble {
    	-webkit-animation:wobble 2s ease 0s 1 backwards;
    	-moz-animation:wobble 2s ease 0s 1 backwards;
    	-ms-animation:wobble 2s ease 0s 1 backwards;
    	-o-animation:wobble 2s ease 0s 1 backwards;
    	animation:wobble 2s ease 0s 1 backwards;
    }
    @keyframes wobble {
    	0%{
    		transform: none
    	}
    	15% {
    		transform: translate3d(-25% , 0, 0) rotate3d(0, 0, 1, -5deg)
    	}
    	30%{
    		transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
    	}
    	45% {
    		transform: translate3d(-15% , 0, 0) rotate3d(0, 0, 1, -3deg)
    	}
    	60%{
    		transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
    	}
    	75% {
    		transform: translate3d(-5% , 0, 0) rotate3d(0, 0, 1, -1deg)
    	}
    	100%{
    		transform: none
    	}
    }
    @-webkit-keyframes wobble {
    	0%{
    		-webkit-transform: none;
    	}
    	15% {
    		-webkit-transform: translate3d(-25% , 0, 0) rotate3d(0, 0, 1, -5deg);
    	}
    	30%{
    		-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    	}
    	45% {
    		-webkit-transform: translate3d(-15% , 0, 0) rotate3d(0, 0, 1, -3deg);
    	}
    	60%{
    		-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    	}
    	75% {
    		-webkit-transform: translate3d(-5% , 0, 0) rotate3d(0, 0, 1, -1deg);
    	}
    	100%{
    		-webkit-transform: none;
    	}
    }
    @-moz-keyframes wobble {
    	0%{
    		-moz-transform: none;
    	}
    	15% {
    		-moz-transform: translate3d(-25% , 0, 0) rotate3d(0, 0, 1, -5deg);
    	}
    	30%{
    		-moz-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    	}
    	45% {
    		-moz-transform: translate3d(-15% , 0, 0) rotate3d(0, 0, 1, -3deg);
    	}
    	60%{
    		-moz-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    	}
    	75% {
    		-moz-transform: translate3d(-5% , 0, 0) rotate3d(0, 0, 1, -1deg);
    	}
    	100%{
    		-moz-transform: none;
    	}
    }
    @-ms-keyframes wobble {
    	0%{
    		-ms-transform: none;
    	}
    	15% {
    		-ms-transform: translate3d(-25% , 0, 0) rotate3d(0, 0, 1, -5deg);
    	}
    	30%{
    		-ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    	}
    	45% {
    		-ms-transform: translate3d(-15% , 0, 0) rotate3d(0, 0, 1, -3deg);
    	}
    	60%{
    		-ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    	}
    	75% {
    		-ms-transform: translate3d(-5% , 0, 0) rotate3d(0, 0, 1, -1deg);
    	}
    	100%{
    		-ms-transform: none;
    	}
    }
    @-o-keyframes wobble {
    	0%{
    		-o-transform: none;
    	}
    	15% {
    		-o-transform: translate3d(-25% , 0, 0) rotate3d(0, 0, 1, -5deg);
    	}
    	30%{
    		-o-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    	}
    	45% {
    		-o-transform: translate3d(-15% , 0, 0) rotate3d(0, 0, 1, -3deg);
    	}
    	60%{
    		-o-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    	}
    	75% {
    		-o-transform: translate3d(-5% , 0, 0) rotate3d(0, 0, 1, -1deg);
    	}
    	100%{
    		-o-transform: none;
    	}
    }
    
    
    
    /**
     * 动画效果9
     * 抖动
     */
    .rubberBand {
    	-webkit-animation:rubberBand 2s ease 0s 1 both;
    	-moz-animation:rubberBand 2s ease 0s 1 both;
    	-ms-animation:rubberBand 2s ease 0s 1 both;
    	-o-animation:rubberBand 2s ease 0s 1 both;
    	animation:rubberBand 2s ease 0s 1 both;
    }
    @keyframes rubberBand {
    	0%{
    		transform: scale3d(1, 1, 1)
    	}
    	30%{
    		transform: scale3d(1.25, .75, 1)
    	}
    	40%{
    		transform: scale3d(0.75, 1.25, 1)
    	}
    	50%{
    		transform: scale3d(1.15, .85, 1)
    	}
    	65% {
    		transform: scale3d(.95, 1.05, 1)
    	}
    	75% {
    		transform: scale3d(1.05, .95, 1)
    	}
    	100%{
    		transform: scale3d(1, 1, 1)
    	}
    }
    @-webkit-keyframes rubberBand {
    	0%{
    		-webkit-transform: scale3d(1, 1, 1);
    	}
    	30%{
    		-webkit-transform: scale3d(1.25, .75, 1);
    	}
    	40%{
    		-webkit-transform: scale3d(0.75, 1.25, 1);
    	}
    	50%{
    		-webkit-transform: scale3d(1.15, .85, 1);
    	}
    	65% {
    		-webkit-transform: scale3d(.95, 1.05, 1);
    	}
    	75% {
    		-webkit-transform: scale3d(1.05, .95, 1);
    	}
    	100%{
    		-webkit-transform: scale3d(1, 1, 1);
    	}
    }
    @-moz-keyframes rubberBand {
    	0%{
    		-moz-transform: scale3d(1, 1, 1);
    	}
    	30%{
    		-moz-transform: scale3d(1.25, .75, 1);
    	}
    	40%{
    		-moz-transform: scale3d(0.75, 1.25, 1);
    	}
    	50%{
    		-moz-transform: scale3d(1.15, .85, 1);
    	}
    	65% {
    		-moz-transform: scale3d(.95, 1.05, 1);
    	}
    	75% {
    		-moz-transform: scale3d(1.05, .95, 1);
    	}
    	100%{
    		-moz-transform: scale3d(1, 1, 1);
    	}
    }
    @-ms-keyframes rubberBand {
    	0%{
    		-ms-transform: scale3d(1, 1, 1);
    	}
    	30%{
    		-ms-transform: scale3d(1.25, .75, 1);
    	}
    	40%{
    		-ms-transform: scale3d(0.75, 1.25, 1);
    	}
    	50%{
    		-ms-transform: scale3d(1.15, .85, 1);
    	}
    	65% {
    		-ms-transform: scale3d(.95, 1.05, 1);
    	}
    	75% {
    		-ms-transform: scale3d(1.05, .95, 1);
    	}
    	100%{
    		-ms-transform: scale3d(1, 1, 1);
    	}
    }
    @-o-keyframes rubberBand {
    	0%{
    		-o-transform: scale3d(1, 1, 1);
    	}
    	30%{
    		-o-transform: scale3d(1.25, .75, 1);
    	}
    	40%{
    		-o-transform: scale3d(0.75, 1.25, 1);
    	}
    	50%{
    		-o-transform: scale3d(1.15, .85, 1);
    	}
    	65% {
    		-o-transform: scale3d(.95, 1.05, 1);
    	}
    	75% {
    		-o-transform: scale3d(1.05, .95, 1);
    	}
    	100%{
    		-o-transform: scale3d(1, 1, 1);
    	}
    }
    
    
    /**
     * 动画效果10
     * 旋转
     */
    .rotateIn {
    	-webkit-animation:rotateIn 2s ease 0s 1 both;
    	-moz-animation:rotateIn 2s ease 0s 1 both;
    	-ms-animation:rotateIn 2s ease 0s 1 both;
    	-o-animation:rotateIn 2s ease 0s 1 both;
    	animation:rotateIn 2s ease 0s 1 both;
    }
    @keyframes rotateIn {
    	from {
    		transform: rotate(0deg)
    	}
    	to {
    		transform: rotate(360deg)
    	}
    }
    @-webkit-keyframes rotateIn {
    	from {
    		-webkit-transform: rotate(0deg)
    	}
    	to {
    		-webkit-transform: rotate(360deg)
    	}
    }
    @-moz-keyframes rotateIn {
    	from {
    		-moz-transform: rotate(0deg)
    	}
    	to {
    		-moz-transform: rotate(360deg)
    	}
    }
    @-ms-keyframes rotateIn {
    	from {
    		-ms-transform: rotate(0deg)
    	}
    	to {
    		-ms-transform: rotate(360deg)
    	}
    }
    @-o-keyframes rotateIn {
    	from {
    		-o-transform: rotate(0deg)
    	}
    	to {
    		-o-transform: rotate(360deg)
    	}
    }
    
    
    /**
     * 动画效果11
     * 翻转
     */
    .flip {
    	-webkit-animation:flip 2s ease 0s 1 both;
    	-moz-animation:flip 2s ease 0s 1 both;
    	-ms-animation:flip 2s ease 0s 1 both;
    	-o-animation:flip 2s ease 0s 1 both;
    	animation:flip 2s ease 0s 1 both;
    }
    @keyframes flip {
    	0%{
    		transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    		animation-timing-function :ease-out;
    	}
    	40%{
    		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    		animation-timing-function :ease-out;
    	}
    	50%{
    		transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    		animation-timing-function :ease-in;
    	}
    	80%{
    		transform: perspective(400px) scale3d(.95, .95, .95);
    		animation-timing-function :ease-in;
    	}
    	100%{
    		transform: perspective(400px);
    		animation-timing-function :ease-in;
    	}
    }
    @-webkit-keyframes flip {
    	0%{
    		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    		-webkit-animation-timing-function :ease-out;
    	}
    	40%{
    		-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    		-webkit-animation-timing-function :ease-out;
    	}
    	50%{
    		-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    		-webkit-animation-timing-function :ease-in ;
    	}
    	80%{
    		-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    		-webkit-animation-timing-function :ease-in ;
    	}
    	100%{
    		-webkit-transform: perspective(400px);
    		-webkit-animation-timing-function :ease-in ;
    	}
    }
    
    @-moz-keyframes flip {
    	0%{
    		-moz-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    		-moz-animation-timing-function :ease-out;
    	}
    	40%{
    		-moz-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    		-moz-animation-timing-function :ease-out;
    	}
    	50%{
    		-moz-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    		-moz-animation-timing-function :ease-in ;
    	}
    	80%{
    		-moz-transform: perspective(400px) scale3d(.95, .95, .95);
    		-moz-animation-timing-function :ease-in ;
    	}
    	100%{
    		-moz-transform: perspective(400px);
    		-moz-animation-timing-function :ease-in ;
    	}
    }
    
    @-ms-keyframes flip {
    	0%{
    		-ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    		-ms-animation-timing-function :ease-out;
    	}
    	40%{
    		-ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    		-ms-animation-timing-function :ease-out;
    	}
    	50%{
    		-ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    		-ms-animation-timing-function :ease-in ;
    	}
    	80%{
    		-ms-transform: perspective(400px) scale3d(.95, .95, .95);
    		-ms-animation-timing-function :ease-in ;
    	}
    	100%{
    		-ms-transform: perspective(400px);
    		-ms-animation-timing-function :ease-in ;
    	}
    }
    
    @-o-keyframes flip {
    	0%{
    		-o-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    		-o-animation-timing-function :ease-out;
    	}
    	40%{
    		-o-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    		-o-animation-timing-function :ease-out;
    	}
    	50%{
    		-o-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    		-o-animation-timing-function :ease-in ;
    	}
    	80%{
    		-o-transform: perspective(400px) scale3d(.95, .95, .95);
    		-o-animation-timing-function :ease-in ;
    	}
    	100%{
    		-o-transform: perspective(400px);
    		-o-animation-timing-function :ease-in ;
    	}
    }
    
    
    /**
     * 动画效果12
     * 悬摆
     */
    .swing {
    	-webkit-animation:swing 2s ease 0s 1 backwards;
    	-moz-animation:swing 2s ease 0s 1 backwards;
    	-ms-animation:swing 2s ease 0s 1 backwards;
    	-o-animation:swing 2s ease 0s 1 backwards;
    	animation:swing 2s ease 0s 1 backwards;
    	
    	-webkit-transform-origin: top center;
    	-moz-transform-origin: top center;
    	-ms-transform-origin: top center;
    	-o-transform-origin: top center;
    	transform-origin: top center;
    }
    @keyframes swing {
    	20%{
    		transform: rotate3d(0, 0, 1, 30deg);
    	}
    	40%{
    		transform: rotate3d(0, 0, 1, -20deg);
    	}
    	60%{
    		transform: rotate3d(0, 0, 1, 10deg);
    	}
    	80%{
    		transform: rotate3d(0, 0, 1, -10deg);
    	}
    	100%{
    		transform: rotate3d(0, 0, 1, 0deg);
    	}
    }
    
    @-webkit-keyframes swing {
    	20%{
    		-webkit-transform: rotate3d(0, 0, 1, 30deg);
    	}
    	40%{
    		-webkit-transform: rotate3d(0, 0, 1, -20deg);
    	}
    	60%{
    		-webkit-transform: rotate3d(0, 0, 1, 10deg);
    	}
    	80%{
    		-webkit-transform: rotate3d(0, 0, 1, -10deg);
    	}
    	100%{
    		-webkit-transform: rotate3d(0, 0, 1, 0deg);
    	}
    }
    
    @-moz-keyframes swing {
    	20%{
    		-moz-transform: rotate3d(0, 0, 1, 15deg);
    	}
    	40%{
    		-moz-transform: rotate3d(0, 0, 1, -10deg);
    	}
    	60%{
    		-moz-transform: rotate3d(0, 0, 1, 5deg);
    	}
    	80%{
    		-moz-transform: rotate3d(0, 0, 1, -5deg);
    	}
    	100%{
    		-moz-transform: rotate3d(0, 0, 1, 0deg);
    	}
    }
    
    @-ms-keyframes swing {
    	20%{
    		-ms-transform: rotate3d(0, 0, 1, 15deg);
    	}
    	40%{
    		-ms-transform: rotate3d(0, 0, 1, -10deg);
    	}
    	60%{
    		-ms-transform: rotate3d(0, 0, 1, 5deg);
    	}
    	80%{
    		-ms-transform: rotate3d(0, 0, 1, -5deg);
    	}
    	100%{
    		-ms-transform: rotate3d(0, 0, 1, 0deg);
    	}
    }
    
    @-o-keyframes swing {
    	20%{
    		-o-transform: rotate3d(0, 0, 1, 15deg);
    	}
    	40%{
    		-o-transform: rotate3d(0, 0, 1, -10deg);
    	}
    	60%{
    		-o-transform: rotate3d(0, 0, 1, 5deg);
    	}
    	80%{
    		-o-transform: rotate3d(0, 0, 1, -5deg);
    	}
    	100%{
    		-o-transform: rotate3d(0, 0, 1, 0deg);
    	}
    }
    
    
    /**
     * 动画效果13
     * 旋转消失
     */
    .flipOut {
    	-webkit-animation:flipOut 2s ease 0s 1 both;
    	-moz-animation:flipOut 2s ease 0s 1 both;
    	-ms-animation:flipOut 2s ease 0s 1 both;
    	-o-animation:flipOut 2s ease 0s 1 both;
    	animation:flipOut 2s ease 0s 1 both;
    }
    @keyframes flipOut {
    	0%{
    		transform: perspective(400px);
    	}
    	30%{
    		transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    		opacity: 1;
    	}
    	100%{
    		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    		opacity: 0;
    	}
    }
    
    @-webkit-keyframes flipOut {
    	0%{
    		-webkit-transform: perspective(400px);
    	}
    	30%{
    		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    		opacity: 1
    	}
    	100%{
    		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    		opacity: 0
    	}
    }
    
    @-moz-keyframes flipOut {
    	0%{
    		-moz-transform: perspective(400px);
    	}
    	30%{
    		-moz-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    		opacity: 1
    	}
    	100%{
    		-moz-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    		opacity: 0
    	}
    }
    @-ms-keyframes flipOut {
    	0%{
    		-ms-transform: perspective(400px);
    	}
    	30%{
    		-ms-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    		opacity: 1
    	}
    	100%{
    		-ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    		opacity: 0
    	}
    }
    @-o-keyframes flipOut {
    	0%{
    		-o-transform: perspective(400px);
    	}
    	30%{
    		-o-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    		opacity: 1
    	}
    	100%{
    		-o-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    		opacity: 0
    	}
    }
    
    
    /**
     * 动画效果 14
     * 心跳
     */
    .heartbeat {
    	-webkit-animation:heartbeat 2s ease 0s 1 both;
    	-moz-animation:heartbeat 2s ease 0s 1 both;
    	-ms-animation:heartbeat 2s ease 0s 1 both;
    	-o-animation:heartbeat 2s ease 0s 1 both;
    	animation:heartbeat 2s ease 0s 1 both;
    }
    @keyframes heartbeat {
    	0%{
    		transform: scale(1);
    	}
    	50%{
    		transform: scale(1.5);
    	}
    	100%{
    		transform: scale(1);
    	}
    }
    @-webkit-keyframes heartbeat {
    	0%{
    		-webkit-transform: scale(1);
    	}
    	50%{
    		-webkit-transform: scale(1.5);
    	}
    	100%{
    		-webkit-transform: scale(1);
    		transform: scale(1)
    	}
    }
    @-moz-keyframes heartbeat {
    	0%{
    		-moz-transform: scale(1);
    	}
    	50%{
    		-moz-transform: scale(1.5);
    	}
    	100%{
    		-moz-transform: scale(1);
    		transform: scale(1)
    	}
    }
    @-ms-keyframes heartbeat {
    	0%{
    		-ms-transform: scale(1);
    	}
    	50%{
    		-ms-transform: scale(1.5);
    	}
    	100%{
    		-ms-transform: scale(1);
    		transform: scale(1)
    	}
    }
    @-o-keyframes heartbeat {
    	0%{
    		-o-transform: scale(1);
    	}
    	50%{
    		-o-transform: scale(1.5);
    	}
    	100%{
    		-o-transform: scale(1);
    		transform: scale(1)
    	}
    }
    
    /************动画效果 End**************/
    

      

  • 相关阅读:
    数组循环三种方式
    PHP上传RAR压缩包并解压目录
    把session写到数据库中
    PHP错误处理方式
    PHP异常处理机制
    css文字的强制换行和超出宽度省略变成点儿
    Mybatis之@Provider的使用方式
    rsync+ssh 枯木
    RHEL6下squid代理之正向代理 枯木
    MySQL体系结构 枯木
  • 原文地址:https://www.cnblogs.com/rubekid/p/7509413.html
Copyright © 2020-2023  润新知