CSS transform: translate3d失效求助：加载器小球无法弹跳

我跟着教程视频复刻CSS加载器代码，视频里transform: translate3d能正常让小球弹跳，但我的代码里这个属性不工作，加载器的小球完全没反应。反复对比教程代码，没找到差异，请问这是什么原因？

我的代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/loader3.css">
    <title>CSS Loaders</title>
</head>
<body>
    
    <div class="loader">
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>

loader3.css #

.loader {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader > span {
    display: inline-block;
    background-color: purple;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin: 0 8px;
    transform: translate3d(0);
    animation: bounce 0.6s infinite alternate;
}

.loader > span:nth-child(2) {
    background-color: palevioletred;
}

.loader > span:nth-child(3) {
    
}

@keyframes bounce {
   to {
        width: 16px;
        height: 16px;
        transform: translate3d(0 -16px, 0)
    }
}

问题原因及修复方案 #

你的代码里有一个CSS语法错误，导致translate3d无法被正确解析：
在@keyframes bounce的to规则中，translate3d(0 -16px, 0)的参数格式不正确——第一个参数0和第二个参数-16px之间缺少了逗号。CSS中translate3d的三个参数必须用逗号分隔，正确写法是translate3d(0, -16px, 0)。

另外，第三个<span>没有设置背景色，虽然不影响弹跳逻辑，但会导致这个小球不可见，建议补充背景色样式。

修正后的loader3.css关键部分 #

@keyframes bounce {
   to {
        width: 16px;
        height: 16px;
        transform: translate3d(0, -16px, 0);
    }
}

.loader > span:nth-child(3) {
    background-color: pink;
}

修正后，小球的弹跳动画就能正常工作了。

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