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

How to make a css keyframe step animation responsive?

本文关键字：动画 响应 关键帧 何使 css      更新时间：2023-09-26
如果我

需要它响应，似乎找不到 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);

}）;

我想知道是否有有经验的人？否则，我可以想象另一种解决方法是使用断点。并为每个容器大小提供特定的动画。

从元素的响应大小开始：

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

由于您有 43 个步骤，请相应地设置背景动画

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

以及背景大小

.animate {
    background-size: 4300%;
}

结果

相关文章：