css 动画 Sprite 表

Question

我有一个 spritesheet，里面有一个骰子； 6张脸。 它的脸是 70 x 70 像素 总 Sprite 图像为 70 x 420 像素

现在我想制作一个从 1 到 6 的 CSS 动画(这很简单) 另外我想改变尺寸；在 50% 时它的大小加倍，在 100% 时恢复正常。

:local(.mydice)
{
    width: 70px;
    height: 70px;
    background: url('/images/dices.png');   
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100% 600%;
    animation: dicemove1 5s steps(6, end) infinite;
}

然后使用关键帧进行更改:

@keyframes dicemove1
{
    0% { background-position: 0px 0px;}
    100% { background-position: 0px -420px; }
}

上面的 CSS 片段有效。 但现在添加代码使其增长失败:

50% { width: 140px; height: 140px; margin-top: -35px; margin-left: -35px; background-position: 0px ???? }

我知道必须更改背景位置以支持更大的尺寸，但问题是我使用了步骤，因为我不想滚动图像但看到它从一个面到另一个面变化(1,2,3,4， 5,6)

将 100 除以 6 不会得到一个很好的整数，这使得 50% 的改变有点困难。 一直在寻找可以处理步骤的关键帧，但还没有找到这样的东西。 任何人都知道这样做的方法吗？

Answer 1

我找到了解决方案。

transform: scale(2,2);

这将使骰子增长。 现在我可以同时使用 2 个动画； 1 换脸其他调整大小

animation: anim1 1s steps(6, end) infinite, anim2 1s steps(36, end) infinite;

@keyframes anim1
{
    0% { background-position: 0px 0px; }
    100% { background-position: 0px -600px; }
}

@keyframes anim2
{
    50% { transform: scale(2,2); }
}