个人常用的css动画总结（持续更新）

定义动画中心

.anim_center {
	transform-origin: 50% 50%;/*定义动画的旋转中心点*/
	-ms-transform-origin: 50% 50%;/* IE 9 */
	-webkit-transform-origin: 50% 50%;/* Safari 和 Chrome */
	-moz-transform-origin: 50% 50%;/* Firefox */
	-o-transform-origin: 50% 50%;/* Opera */
}

360°旋转

.rotate_anim {
	-webkit-animation: rotate_anim 2s linear infinite;
	animation: rotate_anim  2s linear infinite;
}

@-webkit-keyframes rotate_anim {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotate_anim {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

闪烁（透明度）

.shine {
	animation: shine 1s linear infinite alternate;
	-webkit-animation: shine 1s linear infinite alternate;/*Safari and Chrome*/
}

@keyframes shine {
	from {
		opacity: 1;
	}

	to {
		opacity: 0.3;
	}
}

@-webkit-keyframes shine {
	from {
		opacity: 1;
	}

	to {
		opacity: 0.3;
	}
}

荧光灯闪烁1

.shine_fast {
	animation: shine_fast 1.4s infinite;
	-webkit-animation: shine_fast 1.4s infinite;/*Safari and Chrome*/
}

@keyframes shine_fast {

	0%,
	49%,
	100% {
		opacity: 1;
	}

	50%,
	99% {
		opacity: 0;
	}
}

@-webkit-keyframes shine_fast {

	0%,
	49%,
	100% {
		opacity: 1;
	}

	50%,
	99% {
		opacity: 0;
	}
}

荧光灯闪烁2

.light_shine {
	-webkit-animation: light_shine 2s infinite;
	animation: light_shine 2s infinite;
}

@-webkit-keyframes light_shine {

	0%,
	34%,
	45%,
	100% {
		opacity: 1;
	}

	20%,
	40%,
	50% {
		opacity: 0;
	}
}

@keyframes light_shine {

	0%,
	34%,
	45%,
	100% {
		opacity: 1;
	}

	20%,
	40%,
	50% {
		opacity: 0;
	}
}

呼吸灯（放大缩小）

.breath {
	animation: breathe 2s infinite;
	-webkit-animation: breathe 2s infinite;/* Safari and Chrome */
}

@keyframes breathe {
	0%,100% {
		transform: scale(0.9, 0.9);
	}

	50% {
		transform: scale(1.2, 1.2);
	}
}

@-webkit-keyframes breathe/* Safari and Chrome */{
	0%,100%{
		-webkit-transform: scale(0.9, 0.9);
	}

	50% {
		-webkit-transform: scale(1.2, 1.2);
	}
}

弧线出现

旋转着由小变大画弧线出来，关键在于横纵两个动画一快一慢(里面的数值根据需要调整)

.curve_anim {
	animation: 
		curve_anim 1.5s ease-in,
		curve_anim1 1.5s ease-out;
}

@keyframes curve_anim{
    0% {
	    left: 500px;
	    transform: scale(0, 0) rotate(-160deg);
	}
	70% {
		left: 232px;
		transform: scale(0.4, 0.4) rotate(-28deg);
	}
	
    100% {
		left: 40px;
		transform: scale(1, 1) rotate(20deg);
	}
}

@-webkit-keyframes curve_anim{
    0% {
	    left: 500px;
	    -webkit-transform: scale(0, 0) rotate(-160deg);
	}
	70% {
		left: 232px;
		-webkit-transform: scale(0.4, 0.4) rotate(-28deg);
	}
	
    100% {
		left: 40px;
		-webkit-transform: scale(1, 1) rotate(20deg);
	}
}

@keyframes curve_anim1{
    0% {
		top: 600px;
	}
	70% {
		top: 100px;
	}
	
    100% {
		top: 291.5px;
	
	}
}

@-webkit-keyframes curve_anim1{
    0% {
		top: 600px;
	}
	70% {
		top: 100px;
	}
	
    100% {
		top: 291.5px;
	
	}
}

页面上移100%

.move_top{
	-webkit-animation:hide_top 2s ease-out both;
	animation:hide_top 2s ease-out both;
}

@-webkit-keyframes hide_top{
	0%{ 
		-webkit-transform:translateY(0);
	}
	100%{
		 -webkit-transform:translateY(-100%);
	 }
}

@keyframes hide_top{
	0%{
		 transform:translateY(0);
	 }
	100%{
		 transform:translateY(-100%);
	 }
}

上下反复移动（左右就用translateX）

.topToDown {
	animation: topToDown 1s linear infinite alternate;
	-webkit-animation: topToDown 1s linear infinite alternate;
}

@-webkit-keyframes topToDown {
	 from {
		 -webkit-transform:translateY(0px);
	 }

	 to {
		 -webkit-transform:translateY(50px);
	 }
}

@keyframes topToDown {
	from {
		 transform:translateY(0px);
	 }

	 to {
		 transform:translateY(50px);
	 }
}

由左向右移动（左箭头动画）

.left_to_right {
	animation: left_to_right 2s linear infinite alternate;
	-webkit-animation: left_to_right 2s linear infinite alternate;
}

@keyframes left_to_right {
	from {
		transform: translateX(-20px);
	}

	to {
		transform: translateX(0);
	}
}

@-webkit-keyframes left_to_right {
	from {
		transform: translateX(-20px);
	}

	to {
		transform: translateX(0);
	}
}

由右向左移动（右箭头动画）

.right_to_left {
	animation: right_to_left 1s linear infinite alternate;
	-webkit-animation: right_to_left 1s linear infinite alternate;
}

@keyframes right_to_left {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(20px);
	}
}

@-webkit-keyframes right_to_left {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(20px);
	}
}

从上面旋转掉下来由小变大（盲盒抽出效果）

 .blindBox_drop_anim {
 	animation: blindBox_drop_anim 0.6s ease-in;
 	-webkit-animation: blindBox_drop_anim 0.6s ease-in;
 }
 
 @keyframes blindBox_drop_anim {
 	0% {
 		transform: translateY(-80px) rotate(720deg) scale(.2);
 	}
 
 	100% {
 		transform: translateY(0) rotate(0deg) scale(1);
 	}
 }
 
 @-webkit-keyframes blindBox_drop_anim {
 	0% {
 		transform: translateY(-80px) rotate(720deg) scale(.2);
 	}
 
 	100% {
 		transform: translateY(0) rotate(0deg) scale(1);
 	}
 }

摇晃（以下边中间为中心）

.rotateSelf {
 	animation: rotateSelf 6s infinite alternate;
 	-webkit-animation: rotateSelf 6s infinite alternate;
 	transform-origin: center bottom;
 	-webkit-transform-origin: center bottom;
 }
 
 @keyframes rotateSelf {
 
 	0%,
 	50%,
 	100% {
 		transform: rotate(-8deg);
 	}
 
 	25%,
 	75% {
 		transform: rotate(8deg);
 	}
 }
 
 @-webkit-keyframes rotateSelf {
 
 	0%,
 	50%,
 	100% {
 		-webkit-transform: rotate(-8deg);
 	}
 
 	50%,
 	75% {
 		-webkit-transform: rotate(8deg);
 	}
 }

由小变大再淡出（烟花boom）

 .animBoom2 {
 	animation: animBoom 1.5s infinite;
 	-webkit-animation: animBoom 1.5s infinite;
 }
 
 @keyframes animBoom {
 	0% {
 		transform: scale(0);
 		opacity: 1;
 	}
 	
 	80% {
 		transform: scale(1);
 	}
 
 	100% {
 		opacity: 0;
 	}
 }
 
 @-webkit-keyframes animBoom {
 	0% {
 		-webkit-transform: scale(0);
 		opacity: 1;
 	}
 	
 	80% {
 		transform: scale(1);
 	}
 
 	100% {
 		opacity: 0;
 	}
 }

弹窗由小变大出现

.dialogOpen1 {
	-webkit-animation: dialogOpen1 1s linear;
	animation: dialogOpen1 1s linear;  
}
@keyframes dialogOpen1 {
    0% {
        opacity: 0.2;
        transform: scale3d(0.2,0.2,1);
    }
    25%{
        transform: scale3d(0.5,0.5,1);
    }
    50%{
        transform: scale3d(0.8,0.8,1);
    }
    75%{
        transform: scale3d(1.1,1.1,1);
    }
    100% {
        transform: scale3d(1,1,1);
        opacity: 1
    }
}