@nutui/nutui-react-taro/dist/esm/Animate/style/style.css

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

.nut-animate [class*=nut-animate-]{animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:both}@keyframes slide-right{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slide-left{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes slide-top{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.nut-animate .nut-animate-slide-right{animation-name:slide-right}.nut-animate .nut-animate-slide-left{animation-name:slide-left}.nut-animate .nut-animate-slide-top{animation-name:slide-top}.nut-animate .nut-animate-slide-bottom{animation-name:slide-bottom}@keyframes shake{0%,to{transform:translate(0)}10%{transform:translate(-9px)}20%{transform:translate(8px)}30%{transform:translate(-7px)}40%{transform:translate(6px)}50%{transform:translate(-5px)}60%{transform:translate(4px)}70%{transform:translate(-3px)}80%{transform:translate(2px)}90%{transform:translate(-1px)}}.nut-animate .nut-animate-shake{animation-name:shake}@keyframes ripple{0%{transform:scale(1)}50%{transform:scale(1.1)}}.nut-animate .nut-animate-ripple{animation-name:ripple}@keyframes breath{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.nut-animate .nut-animate-breath{animation-name:breath;animation-duration:2.7s;animation-timing-function:ease-in-out;animation-direction:alternate}.nut-animate .nut-animate-twinkle{position:relative}.nut-animate .nut-animate-twinkle:after,.nut-animate .nut-animate-twinkle:before{width:60px;height:60px;content:"";box-sizing:border-box;border:4px solid rgba(255,255,255,.6);position:absolute;border-radius:30px;right:50%;margin-top:-30px;margin-right:-30px;z-index:1;transform:scale(0);animation:twinkle 2s ease-out infinite}.nut-animate .nut-animate-twinkle:after{animation-delay:.4s}@keyframes twinkle{0%{transform:scale(0)}20%{opacity:1}50%,to{transform:scale(1.4);opacity:0}}.nut-animate .nut-animate-flicker{position:relative;overflow:hidden}.nut-animate .nut-animate-flicker:after{width:100px;height:60px;position:absolute;left:0;top:0;opacity:.73;content:"";background-image:linear-gradient(106deg,#e8e0ff00 24%,#e8e0ff 91%);animation:flicker 1.5s linear infinite;transform:skew(-20deg);filter:blur(3px)}@keyframes flicker{0%{transform:translate(-100px) skew(-20deg)}40%,to{transform:translate(150px) skew(-20deg)}}@keyframes jump{0%{transform:rotate(0) translateY(0)}25%{transform:rotate(10deg) translateY(20px)}50%{transform:rotate(0) translateY(-10px)}75%{transform:rotate(-10deg) translateY(20px)}to{transform:rotate(0) translateY(0)}}.nut-animate .nut-animate-jump{transform-origin:center center;animation:jump .7s linear}@keyframes float-pop{0%{top:0}25%{top:1px}50%{top:4px}75%{top:1px}to{top:0}}.nut-animate .nut-animate-float{position:relative;animation-name:float-pop}.nut-animate .loop{animation-iteration-count:infinite}