如何玩特定的关键帧的CSS动画

Question

我想打关键帧1，2，3，2，1 CSS动画：

这不起作用：

@keyframes play-specific { 
    0% { 
    background-position: 0px; 
    } 
    25% { 
    background-position: -50px; 
    } 
    50% { 
    background-position: -100px; 
    } 
    75% { 
    background-position: -50px; 
    } 
    100% { 
    background-position: -0px; 
    } 
} 

动画：

.hi { 
    width: 50px; 
    height: 72px; 
    background-image: url("http://s.cdpn.io/79/sprite-steps.png"); 

    animation: play-specific 1s steps(4) infinite; 
} 

看到http://jsfiddle.net/CGmCe/12960/

Answer 1

步骤（）将打破动画从一个关键帧到另一个。它可以用来避免设置每个关键帧。

当关键帧设置，1意味着从一个关键帧跳转到另一个没有过渡。

.hi { 
 
    width: 50px; 
 
    height: 72px; 
 
    background-image: url("http://s.cdpn.io/79/sprite-steps.png"); 
 
      animation: play-specific 1s steps(1) infinite; 
 
} 
 
.ho { 
 
    width: 50px; 
 
    height: 72px; 
 
    background-image: url("http://s.cdpn.io/79/sprite-steps.png"); 
 
      animation: play 1s steps(10) infinite; 
 
} 
 
@keyframes play-specific {/* steps() will be applied in between each keyframes, 1 is to jump from a keyframe to another without transition */ 
 
    0% { 
 
    background-position: 0px; 
 
    } 
 
    25% { 
 
    background-position: -50px; 
 
    } 
 
    50% { 
 
    background-position: -100px; 
 
    } 
 
    75% { 
 
    background-position: -50px; 
 
    } 
 
    100% { 
 
    background-position: -0px; 
 
    } 
 
} 
 

 
@keyframes play {/* steps here need to be adapted in order to break the linearity of animation */ 
 
    from { background-position: 0px; } 
 
    to { background-position: -500px; } 
 
}

<div class="hi"></div> 
 
<div class="ho"></div>

看到W3C

For a keyframed animation, the 'animation-timing-function' applies between keyframes, not over the entire animation. For example, in the case of an ease-in-out timing function, an animation will ease in at the start of the keyframe and ease out at the end of the keyframe. A 'animation-timing-function' defined within a keyframe block applies to that keyframe, otherwise the timing function specified for the animation is used.