_animate_keyframes(_type) // TODO: 单位选项，px or rem if _type == bounce @keyframes _type 0%, 20%, 50%, 80%, 100% transform: translateY(0) 40% transform: translateY(-30px) 60% transform: translateY(-15px) else if _type == bounceIn @keyframes _type 0% opacity: 0 transform: scale(.3) 50% opacity: 1 transform: scale(1.05) 70% transform: scale(.9) 100% transform: scale(1) else if _type == bounceInDown @keyframes _type 0% opacity: 0 transform: translateY(-2000px) 60% opacity: 1 -webkit-transform: translateY(30px) 80% -webkit-transform: translateY(-10px) 100% -webkit-transform: translateY(0) else if _type == bounceInLeft @keyframes _type 0% opacity: 0 transform: translateX(-2000px) 60% opacity: 1 -webkit-transform: translateX(30px) 80% -webkit-transform: translateX(-10px) 100% -webkit-transform: translateX(0) else if _type == bounceInRight @keyframes _type 0% opacity: 0 transform: translateX(2000px) 60% opacity: 1 -webkit-transform: translateX(-30px) 80% -webkit-transform: translateX(10px) 100% -webkit-transform: translateX(0) else if _type == bounceInUp @keyframes _type 0% opacity: 0 transform: translateY(2000px) 60% opacity: 1 -webkit-transform: translateY(-30px) 80% -webkit-transform: translateY(10px) 100% -webkit-transform: translateY(0) else if _type == bounceOut @keyframes _type 0% transform: scale(1) 25% transform: scale(.95) 50% opacity: 1 transform: scale(1.1) 100% opacity: 0 transform: scale(.3) else if _type == bounceOutDown @keyframes _type 0% transform: translateY(0) 20% opacity: 1 transform: translateY(-20px) 100% opacity: 0 transform: translateY(2000px) else if _type == bounceOutLeft @keyframes _type 0% transform: translateX(0) 20% opacity: 1 transform: translateX(20px) 100% opacity: 0 transform: translateX(-2000px) else if _type == bounceOutRight @keyframes _type 0% transform: translateX(0) 20% opacity: 1 transform: translateX(-20px) 100% opacity: 0 transform: translateX(2000px) else if _type == bounceOutUp @keyframes _type 0% transform: translateY(0) 20% opacity: 1 transform: translateY(20px) 100% opacity: 0 transform: translateY(-2000px) else if _type == fadeIn @keyframes _type 0% opacity: 0 100% opacity: 1 else if _type == fadeInDown @keyframes _type 0% opacity: 0 transform: translateY(-20px) 100% opacity: 1 transform: translateY(0) else if _type == fadeInDownBig @keyframes _type 0% opacity: 0 transform: translateY(-2000px) 100% opacity: 1 transform: translateY(0) else if _type == fadeInLeft @keyframes _type 0% opacity: 0 transform: translateX(-20px) 100% opacity: 1 transform: translateX(0) else if _type == fadeInLeftBig @keyframes _type 0% opacity: 0 transform: translateX(-2000px) 100% opacity: 1 transform: translateX(0) else if _type == fadeInRight @keyframes _type 0% opacity: 0 transform: translateX(20px) 100% opacity: 1 transform: translateX(0) else if _type == fadeInRightBig @keyframes _type 0% opacity: 0 transform: translateX(2000px) 100% opacity: 1 transform: translateX(0) else if _type == fadeInUp @keyframes _type 0% opacity: 0 transform: translateY(20px) 100% opacity: 1 transform: translateY(0) else if _type == fadeInUpBig @keyframes _type 0% opacity: 0 transform: translateY(2000px) 100% opacity: 1 transform: translateY(0) else if _type == fadeOut @keyframes _type 0% opacity: 1 100% opacity: 0 else if _type == fadeOutDown @keyframes _type 0% opacity: 1 transform: translateY(0) 100% opacity: 0 transform: translateY(20px) else if _type == fadeOutDownBig @keyframes _type 0% opacity: 1 transform: translateY(0) 100% opacity: 0 transform: translateY(2000px) else if _type == fadeOutLeft @keyframes _type 0% opacity: 1 transform: translateX(0) 100% opacity: 0 transform: translateX(-20px) else if _type == fadeOutLeftBig @keyframes _type 0% opacity: 1 transform: translateX(0) 100% opacity: 0 transform: translateX(-2000px) else if _type == fadeOutRight @keyframes _type 0% opacity: 1 transform: translateX(0) 100% opacity: 0 transform: translateX(20px) else if _type == fadeOutRightBig @keyframes _type 0% opacity: 1 transform: translateX(0) 100% opacity: 0 transform: translateX(2000px) else if _type == fadeOutUp @keyframes _type 0% opacity: 1 transform: translateY(0) 100% opacity: 0 transform: translateY(-20px) else if _type == fadeOutUpBig @keyframes _type 0% opacity: 1 transform: translateY(0) 100% opacity: 0 transform: translateY(-2000px) else if _type == flash @keyframes _type 0%, 50%, 100% opacity: 1 25%, 75% opacity: 0 else if _type == flip @keyframes _type 0% transform: perspective(400px) translateZ(0) rotateY(0) scale(1) animation-timing-function: ease-out 40% transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1) animation-timing-function: ease-out 50% transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1) animation-timing-function: ease-in 80% transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95) animation-timing-function: ease-in 100% transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1) animation-timing-function: ease-in else if _type == flipInX @keyframes _type 0% transform: perspective(400px) rotateX(90deg) opacity: 0 40% transform: perspective(400px) rotateX(-10deg) 70% transform: perspective(400px) rotateX(10deg) 100% transform: perspective(400px) rotateX(0deg) opacity: 1 else if _type == flipInY @keyframes _type 0% transform: perspective(400px) rotateY(90deg) opacity: 0 40% transform: perspective(400px) rotateY(-10deg) 70% transform: perspective(400px) rotateY(10deg) 100% transform: perspective(400px) rotateY(0deg) opacity: 1 else if _type == flipOutX @keyframes _type 0% transform: perspective(400px) rotateX(0deg) opacity: 1 100% transform: perspective(400px) rotateX(90deg) opacity: 0 else if _type == flipOutY @keyframes _type 0% transform: perspective(400px) rotateY(0deg) opacity: 1 100% transform: perspective(400px) rotateY(90deg) opacity: 0 else if _type == hinge @keyframes _type 0% transform: rotate(0) transform-origin: top left animation-timing-function: ease-in-out 20%, 60% transform: rotate(80deg) transform-origin: top left animation-timing-function: ease-in-out 40% transform: rotate(60deg) transform-origin: top left animation-timing-function: ease-in-out 80% transform: rotate(60deg) translateY(0) opacity: 1 transform-origin: top left animation-timing-function: ease-in-out 100% transform: translateY(700px) opacity: 0 else if _type == lightSpeedIn @keyframes _type 0% transform: translateX(100%) skewX(-30deg) opacity: 0 60% transform: translateX(-20%) skewX(30deg) opacity: 1 80% transform: translateX(0%) skewX(-15deg) opacity: 1 100% transform: translateX(0%) skewX(0deg) opacity: 1 else if _type == lightSpeedOut @keyframes _type 0% transform: translateX(0%) skewX(0deg) opacity: 1 100% transform: translateX(100%) skewX(-30deg) opacity: 0 else if _type == pulse @keyframes _type 0% transform: scale(1) 50% transform: scale(1.1) 100% transform: scale(1) else if _type == rollIn @keyframes _type 0% opacity: 0 transform: translateX(-100%) rotate(-120deg) 100% opacity: 1 transform: translateX(0px) rotate(0deg) else if _type == rollOut @keyframes _type 0% opacity: 1 transform: translateX(0px) rotate(0deg) 100% opacity: 0 transform: translateX(-100%) rotate(-120deg) else if _type == rotateIn @keyframes _type 0% transform-origin: center center transform: rotate(-200deg) opacity: 0 100% transform-origin: center center transform: rotate(0) opacity: 1 else if _type == rotateInDownLeft @keyframes _type 0% transform-origin: left bottom transform: rotate(-90deg) opacity: 0 100% transform-origin: left bottom transform: rotate(0) opacity: 1 else if _type == rotateInDownRight @keyframes _type 0% transform-origin: right bottom transform: rotate(90deg) opacity: 0 100% transform-origin: right bottom transform: rotate(0) opacity: 1 else if _type == rotateInUpLeft @keyframes _type 0% transform-origin: left bottom transform: rotate(90deg) opacity: 0 100% transform-origin: left bottom transform: rotate(0) opacity: 1 else if _type == rotateInUpRight @keyframes _type 0% transform-origin: right bottom transform: rotate(-90deg) opacity: 0 100% transform-origin: right bottom transform: rotate(0) opacity: 1 else if _type == rotateOut @keyframes _type 0% transform-origin: center center transform: rotate(0) opacity: 1 100% transform-origin: center center transform: rotate(200deg) opacity: 0 else if _type == rotateOutDownLeft @keyframes _type 0% transform-origin: left bottom transform: rotate(0) opacity: 1 100% transform-origin: left bottom transform: rotate(90deg) opacity: 0 else if _type == rotateOutDownRight @keyframes _type 0% transform-origin: right bottom transform: rotate(0) opacity: 1 100% transform-origin: right bottom transform: rotate(-90deg) opacity: 0 else if _type == rotateOutUpLeft @keyframes _type 0% transform-origin: left bottom transform: rotate(0) opacity: 1 100% transform-origin: left bottom transform: rotate(-90deg) opacity: 0 else if _type == rotateOutUpRight @keyframes _type 0% transform-origin: right bottom transform: rotate(0) opacity: 1 100% transform-origin: right bottom transform: rotate(90deg) opacity: 0 else if _type == shake @keyframes _type 0%, 100% transform: translateX(0) 10%, 30%, 50%, 70%, 90% transform: translateX(-10px) 20%, 40%, 60%, 80% transform: translateX(10px) else if _type == slideInDown @keyframes _type 0% opacity: 0 transform: translateY(-2000px) 100% transform: translateY(0) else if _type == slideInLeft @keyframes _type 0% opacity: 0 transform: translateX(-2000px) 100% transform: translateX(0) else if _type == slideInRight @keyframes _type 0% opacity: 0 transform: translateX(2000px) 100% transform: translateX(0) else if _type == slideOutLeft @keyframes _type 0% transform: translateX(0) 100% opacity: 0 transform: translateX(-2000px) else if _type == slideOutRight @keyframes _type 0% transform: translateX(0) 100% opacity: 0 transform: translateX(2000px) else if _type == slideOutUp @keyframes _type 0% transform: translateY(0) 100% opacity: 0 transform: translateY(-2000px) else if _type == swing @keyframes _type 20% transform: rotate(15deg) 40% transform: rotate(-10deg) 60% transform: rotate(5deg) 80% transform: rotate(-5deg) 100% transform: rotate(0deg) else if _type == tada @keyframes _type 0% transform: scale(1) 10%, 20% transform: scale(0.9) rotate(-3deg) 30%, 50%, 70%, 90% transform: scale(1.1) rotate(3deg) 40%, 60%, 80% transform: scale(1.1) rotate(-3deg) 100% transform: scale(1) rotate(0) else if _type == wobble @keyframes _type 0% transform: translateX(0%) 15% transform: translateX(-25%) rotate(-5deg) 30% transform: translateX(20%) rotate(3deg) 45% transform: translateX(-15%) rotate(-3deg) 60% transform: translateX(10%) rotate(2deg) 75% transform: translateX(-5%) rotate(-1deg) 100% transform: translateX(0%) _animate_special_process(_type) if _type == flip || _type == flipInX || _type == flipInY || _type == flipOutX || _type == flipOutY backface-visibility: visible !important else if _type == lightSpeedIn animation-timing-function: ease-out else if _type == lightSpeedOut animation-timing-function: ease-in else if _type == swing transform-origin: top center animate(_selector, _type, _duration, _fill_mode) {_selector} animation-name: _type animation-duration: _duration animation-fill-mode: _fill_mode _animate_special_process(_type) _animate_keyframes(_type)