Question

似乎无法找到css关键帧动画的解决方案，如果我需要它来响应？ http://jsbin.com/muyeguba/9

使用*步动画。这意味着具有正确的宽度，可以除以我猜测生成动画的步数。

我尝试用js改变宽度，但是动画中断了，而是开始滑动（我的意思是，步骤动画停止，新帧基本上是从右到左）。

$（window）.on（'resize'，function（）{

if ( window.innerWidth >= maxSz ) {
    return;
};

originalW = 18490; //this is the original stripe width
originalH = 383;
ratio = containerFooWidth / maxSz;

newSize = originalW/ratio + "px" + " " + originalH/ratio + "px";

$(".my-sprite").css("background-size", newSize);

}）;

我想知道是否有人经历过？否则我可以想象另一种方法是使用断点。并为每个容器大小设置特定的动画。

Answer 1

从元素的响应大小开始：

.animate {
    width:100%;
    height: 0px;
    padding-bottom: 75%;
}

由于你有43步，所以相应地设置背景动画

@keyframes play {
    from { background-position:    0% }
    to { background-position: 4300%; }
}

以及背景尺寸

.animate {
    background-size: 4300%;
}

result

如何使css关键帧步骤动画响应？

1 个答案: