我正在判断我发现的一个动画的css代码:The code
动画采用背景的第一列，并通过从上到下(背景的左侧)循环通过背景来制作动画.
然而，问题是，我不能为其他三种类型的移动(其他三列)复制这个过程.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tuna {
animation: walk-cycle 1s steps(12) infinite;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-90/tuna_sprite.png) 0 0 no-repeat;
height: 200px;
width: 400px;
margin: 100px auto 0;
}
@keyframes walk-cycle {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -2391px;
}
}
html {
text-align: center;
}
</style>
</head>
<body>
<div class="tuna"></div>
</body>
</html>我划分了图像的高度和宽度，并从第二列移动了动画的开始，但无论我在动画中添加多高或多宽，它都不起作用.
@keyframes walk-cycle {
0% {background-position: 400 0; }
100% {background-position: 400 -2391px; }
}
我认为问题可能出在Backback属性中的"0 0"值，因为它们代表默认的背景位置(左上角)，但无论我多少次更改它的值，它都不起作用，它只给我一个空白页面.
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-90/tuna_sprite.png) 0 0 no-repeat;
我试图搜索"0 0"值，但无法找到它们代表的值.