CSSアニメーションはここ

Question

をスキップし、私のCSSコードです：

#case { 
    background-position: -0px 0px; 
    -webkit-animation-name: example; /* Chrome, Safari, Opera */ 
    -webkit-animation-duration: 5s; /* Chrome, Safari, Opera */ 
    animation-name: example; 
    animation-duration: 5s; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes example { 
    0% {background-position: -0px 0px;} 
    25% {background-position: -1050px 0px;} 
    50% {background-position: -0px 0px;} 
    75% {background-position: -1050px 0px;} 
    100% {background-position: -1050px 0px;} 
} 

/* Standard syntax */ 
@keyframes example { 
    0% {background-position: -0px 0px;} 
    25% {background-position: -1050px 0px;} 
    50% {background-position: -0px 0px;} 
    75% {background-position: -1050px 0px;} 
    100% {background-position: -1050px 0px;} 
} 

は、アニメーションが完了時に最初のキーフレームに戻ることなく、通じプレイするために私が必要なのです。

Answer 1

を試してみてください。

#case { 
    background-position: -0px 0px; 
    -webkit-animation-name: example; /* Chrome, Safari, Opera */ 
    -webkit-animation-duration: 5s; /* Chrome, Safari, Opera */ 
    animation-name: example; 
    animation-duration: 5s; 
} 
/* Chrome, Safari, Opera */ 
@-webkit-keyframes example { 
    0% {background-position: -0px 0px;} 
    100% {background-position: -1050px 0px;} 
} 

/* Standard syntax */ 
@keyframes example { 
    0% {background-position: -0px 0px;} 
    100% {background-position: -1050px 0px;} 
} 

Answer 2

Youreのanimation-fill-modeを探して、特にforwardsに設定します。

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */ 
animation-fill-mode: forwards;