欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS3动画效果

程序员文章站 2022-03-19 09:56:46
...
/************动画效果**************/
.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**************/