zoukankan      html  css  js  c++  java

  • 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**************/

    　　
  • 相关阅读:
    最小公倍数
    记录输入的数字并输出
    带时间的进度条
    进度条二：普通版
    文件的练习
    《k8s权威指南》读书笔记
    面试后如何判断岗位是否符合自己要求
    索引的三星系统
    使用Mysql分区表对数据库进行优化
    MySQL索引的基本操作
  • 原文地址：https://www.cnblogs.com/rubekid/p/7509413.html
Copyright © 2011-2022 走看看