个人常用的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-keyframesrotate_anim{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframesrotate_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*/}@keyframesshine{from{opacity:1;}to{opacity:0.3;}}@-webkit-keyframesshine{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*/}@keyframesshine_fast{0%, 49%, 100%{opacity:1;}50%, 99%{opacity:0;}}@-webkit-keyframesshine_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-keyframeslight_shine{0%, 34%, 45%, 100%{opacity:1;}20%, 40%, 50%{opacity:0;}}@keyframeslight_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 */}@keyframesbreathe{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;}@keyframescurve_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-keyframescurve_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);}}@keyframescurve_anim1{0%{top:600px;}70%{top:100px;}100%{top:291.5px;}}@-webkit-keyframescurve_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-keyframeshide_top{0%{-webkit-transform:translateY(0);}100%{-webkit-transform:translateY(-100%);}}@keyframeshide_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-keyframestopToDown{from{-webkit-transform:translateY(0px);}to{-webkit-transform:translateY(50px);}}@keyframestopToDown{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;}@keyframesleft_to_right{from{transform:translateX(-20px);}to{transform:translateX(0);}}@-webkit-keyframesleft_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;}@keyframesright_to_left{from{transform:translateX(0);}to{transform:translateX(20px);}}@-webkit-keyframesright_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;}@keyframesblindBox_drop_anim{0%{transform:translateY(-80px)rotate(720deg)scale(.2);}100%{transform:translateY(0)rotate(0deg)scale(1);}}@-webkit-keyframesblindBox_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;}@keyframesrotateSelf{0%, 50%, 100%{transform:rotate(-8deg);}25%, 75%{transform:rotate(8deg);}}@-webkit-keyframesrotateSelf{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;}@keyframesanimBoom{0%{transform:scale(0);opacity:1;}80%{transform:scale(1);}100%{opacity:0;}}@-webkit-keyframesanimBoom{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 } }