如何使CSS关键帧步骤动画具有响应性？

Question

Can't seem to find a solution for css keyframes animations, if I need it to be responsive ? http://jsbin.com/muyeguba/9

Using *step animation. Which implies having a correct width that can be divided by the number of steps I guess to generate the animation.

I tried to change the width with js but the animation breaks, and starts sliding instead (what I mean, is that the step animation stops and new frames are basically coming from right to left).

$(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);

});

I wonder if there's someone experienced ? Otherwise I can imagine that the other way around this would be using breakpoints. and have the specific animation for each container size.

Answer 1

Begin with responsive size on the element:

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

and since you have 43 steps, set the background animation accordingly

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

and also the background size

.animate {
    background-size: 4300%;
}

result