/*抖动动画*/ @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } .apply-shake { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } /*翻转动画*/ @keyframes rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(10deg); } } @keyframes rotateBack { 0% { transform: rotateY(10deg); } 100% { transform: rotateY(0deg); } } .overturn-shake { animation: rotate 0.8s ease-in-out 1; animation-fill-mode: forwards; } .overturn-back-shake { animation: rotateBack 0.8s ease-in-out 1; animation-fill-mode: forwards; }