/* fade-in 渐显动画: */
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
/* fade-out 渐隐动画: */
@keyframes fade-out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
/* slide-in 滑入动画: */
@keyframes slide-in {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}
/* slide-out 滑出动画: */
@keyframes slide-out {
    0% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}
/* spin 旋转动画: */
@keyframes spin {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}
/* pulse 脉动动画: */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
/* bounce 弹跳动画: */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
/* shake 抖动动画: */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}
/* fade-slide 淡入淡出滑动动画: */
@keyframes fade-slide {
    0% { opacity: 0; transform: translateX(-50%); }
    100% { opacity: 1; transform: translateX(0); }
}
/* heartbeat 心跳动画: */
@keyframes heartbeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* scale-in-center 中心缩小动画: */
@keyframes scale-in-center {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}
/* scale-out-center 中心放大动画: */
@keyframes scale-out-center {
    0% { transform: scale(1); }
    100% { transform: scale(0); }
}
/* rotate-in 旋转渐现动画: */
@keyframes rotate-in {
    0% { opacity: 0; transform: rotate(-180deg); }
    100% { opacity: 1; transform: rotate(0); }
}
/* rotate-out 旋转渐隐动画: */
@keyframes rotate-out {
    0% { opacity: 1; transform: rotate(0); }
    100% { opacity: 0; transform: rotate(180deg); }
}
/* flip-in 翻转渐现动画: */
@keyframes flip-in {
    0% { opacity: 0; transform: rotateX(-180deg); }
    100% { opacity: 1; transform: rotateX(0); }
}
/* flip-out 翻转渐隐动画: */
@keyframes flip-out {
    0% { opacity: 1; transform: rotateX(0); }
    100% { opacity: 0; transform: rotateX(180deg); }
}
/* skew-in 倾斜渐现动画: */
@keyframes skew-in {
    0% { opacity: 0; transform: skewY(-45deg); }
    100% { opacity: 1; transform: skewY(0); }
}
/* skew-out 倾斜渐隐动画: */
@keyframes skew-out {
    0% { opacity: 1; transform: skewY(0); }
    100% { opacity: 0; transform: skewY(45deg); }
}
/* zoom-in 缩放渐现动画: */
@keyframes zoom-in {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}
/* zoom-out 缩放渐隐动画: */
@keyframes zoom-out {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.5); }
}