如何优化HTML/CSS卡片洗牌动画，实现流畅循环效果？

问题描述 #

我正在钻研CSS动画领域，尝试复刻某网站上的卡片洗牌动画。目前已实现基础运动效果，但在优化每张卡片的位移和相对运动时遇到困难，当前动画生硬，无法达到预期的循环洗牌效果，请问我哪里出错了？

用户代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card-container">
        <div class="card">
          <img src="./assets/Cart  Geometric  2.png" alt="Card 1">
        </div>
        <div class="card">
          <img src="./assets/Cart  Geometric  5.png" alt="Card 2">
        </div>
        <div class="card">
          <img src="./assets/Cart  Geometric  8.png" alt="Card 3">
        </div>
      </div>
</body>
</html>

CSS

body {
    font-family: 'HelveticaNeue', sans-serif;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100vh;
    background: url('./assets/Vector\ 1.png') center/cover no-repeat , linear-gradient(180deg, #DBE4ED 100%, #BABABA 100%)  ;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-container {
    position: relative;
    perspective: 1000px;
    width: 300px;
    height: 200px;
}

.card {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotateCard 6s linear infinite;
}

@keyframes rotateCard {
    20% {
        transform: rotate(4deg) translateY(-10px);
        z-index: 3;
    }
    40%, 100% {
        transform: rotate(-4deg) translateY(10px);
        z-index: 2;
    }
    0%, 60%, 80% {
        transform: scale(1) translateY(0);
        z-index: 1;
    }
}

.card:nth-child(2) { animation-delay: 2s; }
.card:nth-child(3) { animation-delay: 4s; }

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 170px; 
}

核心问题分析 #

• 关键帧逻辑断裂：rotateCard关键帧在20%→40%、60%→80%的过渡无平滑衔接，直接从「上移旋转」跳到「下移旋转」，同时z-index突变，导致动画卡顿生硬。
• 动画曲线机械：使用linear线性动画，缺少自然的加速减速过程，动作显得僵硬。
• 循环衔接断层：关键帧100%状态与0%不一致，加上延迟设置，循环时卡片状态跳转突兀。
• 运动流程不完整：未覆盖「初始→上前→下后→回归初始」的完整洗牌闭环，缺少从下移状态回到初始的过渡阶段。

修正后的代码 #

CSS #

body {
    font-family: 'HelveticaNeue', sans-serif;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100vh;
    background: url('./assets/Vector\ 1.png') center/cover no-repeat , linear-gradient(180deg, #DBE4ED 100%, #BABABA 100%);
}

.card-container {
    position: relative;
    perspective: 1000px;
    width: 300px;
    height: 200px;
}

.card {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: shuffleCard 4s ease-in-out infinite;
}

@keyframes shuffleCard {
    0% {
        transform: translateY(0) rotate(0deg);
        z-index: 1;
        opacity: 1;
    }
    20% {
        transform: translateY(-20px) rotate(5deg);
        z-index: 3;
        opacity: 1;
    }
    40% {
        transform: translateY(10px) rotate(-3deg);
        z-index: 2;
        opacity: 0.9;
    }
    60% {
        transform: translateY(0) rotate(0deg);
        z-index: 1;
        opacity: 1;
    }
    100% {
        transform: translateY(0) rotate(0deg);
        z-index: 1;
        opacity: 1;
    }
}

.card:nth-child(2) { animation-delay: 1.3s; }
.card:nth-child(3) { animation-delay: 2.6s; }

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 170px;
}

优化说明 #

• 完整闭环关键帧：设计了「初始→上移旋转→下移旋转→回归初始」的完整流程，每个阶段平滑过渡，避免突变。
• 自然运动曲线：替换linear为ease-in-out，模拟真实物理运动的加速减速，让动画更流畅。
• 层级与透明度同步：动画中同步调整z-index和opacity，让卡片前后层级变化更自然，无突兀闪现。
• 错落延迟节奏：调整延迟为1.3s、2.6s，让三张卡片的动画形成连贯的洗牌序列，循环衔接更顺畅。

内容的提问来源于stack exchange，提问作者glitch_12