nutui-taro-upgrade/dist/packages/animate/index.css

@nutui/nutui-taro 对京东风格组件库的taro4 版本支持

.nut-animate .nut-animate__container{display:inline-block}.nut-animate [class*=nut-animate-]{animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:both}.nut-animate .nut-animate-shake{animation-name:shake}.nut-animate .nut-animate-ripple{animation-name:ripple}.nut-animate .nut-animate-float{position:relative;animation-name:float-pop}.nut-animate .nut-animate-breath{animation-name:breath;animation-duration:2700ms;animation-timing-function:ease-in-out;animation-direction:alternate}.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}.nut-animate .nut-animate-jump{transform-origin:center center;animation:jump .7s linear}.nut-animate .loop{animation-iteration-count:infinite}@keyframes shake{0%,100%{transform:translateX(0)}10%{transform:translateX(-9px)}20%{transform:translateX(8px)}30%{transform:translateX(-7px)}40%{transform:translateX(6px)}50%{transform:translateX(-5px)}60%{transform:translateX(4px)}70%{transform:translateX(-3px)}80%{transform:translateX(2px)}90%{transform:translateX(-1px)}}@keyframes ripple{0%{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes breath{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes slide-right{0%{opacity:0;transform:translateX(100%)}100%{opacity:1;transform:translateX(0)}}@keyframes slide-left{0%{opacity:0;transform:translateX(-100%)}100%{opacity:1;transform:translateX(0)}}@keyframes slide-top{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}@keyframes slide-bottom{0%{opacity:0;transform:translateY(100%)}100%{opacity:1;transform:translateY(0)}}@keyframes float-pop{0%{top:0px}25%{top:1px}50%{top:4px}75%{top:1px}100%{top:0px}}@keyframes jump{0%{animation-timing-function:ease-in;transform:rotate(0deg) translateY(0)}25%{animation-timing-function:ease-out;transform:rotate(10deg) translateY(20px)}50%{animation-timing-function:ease-in;transform:rotate(0deg) translateY(-10px)}75%{animation-timing-function:ease-out;transform:rotate(-10deg) translateY(20px)}100%{animation-timing-function:ease-in;transform:rotate(0deg) translateY(0)}}.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:-15px;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%,100%{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, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%);animation:flicker 1.5s linear infinite;transform:skewX(-20deg);filter:blur(3px)}@keyframes flicker{0%{transform:translateX(-100px) skewX(-20deg)}40%,100%{transform:translateX(150px) skewX(-20deg)}}