如何玩特定的關鍵幀的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.