キーフレームのアニメーションが最初のポイントに戻らない、または返さない

Question

最初の位置に戻らないキーフレームを使用しようとしています。つまり、左から右に移動しても左に戻ることはありません。

コード

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: relative; 
 
    -webkit-animation-name: example; 
 
    -webkit-animation-duration: 4s; 
 
    animation-name: example; 
 
    animation-duration: 4s; 
 
} 
 

 
/* Safari 4.0 - 8.0 */ 
 

 
@-webkit-keyframes example { 
 
    0% { 
 
    background-color: red; 
 
    left: 0px; 
 
    top: 0px; 
 
    } 
 
    100% { 
 
    background-color: yellow; 
 
    left: 200px; 
 
    top: 0px; 
 
    } 
 
} 
 

 

 
/* Standard syntax */ 
 

 
@keyframes example { 
 
    0% { 
 
    background-color: red; 
 
    left: 0px; 
 
    top: 0px; 
 
    } 
 
    100% { 
 
    background-color: yellow; 
 
    left: 200px; 
 
    top: 0px; 
 
    } 
 
}

<div></div>

Answer 1

あなただけのdivにanimation-fill-mode: forwards;を追加する必要があります。それは、単一の時間を動作しますか、あなたがループの中でそれをしたいならば、「しようとしたアニメーション-iteration-ことができます。

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: relative; 
 
    -webkit-animation-name: example; 
 
    -webkit-animation-duration: 4s; 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation-name: example; 
 
    animation-duration: 4s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
/* Safari 4.0 - 8.0 */ 
 
@-webkit-keyframes example { 
 
    0% {background-color:red; left:0px; top:0px;} 
 
    100% {background-color:yellow; left:200px; top:0px;} 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes example { 
 
    0% {background-color:red; left:0px; top:0px;} 
 
    100% {background-color:yellow; left:200px; top:0px;} 
 
}

<div></div>

Answer 2

あなただけの「1アニメーション-反復カウント」を追加する必要がありますcount：divに無限大。

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: relative; 
 
    -webkit-animation-name: example; 
 
    -webkit-animation-duration: 4s; 
 
    animation-name: example; 
 
    animation-duration: 4s; 
 
    animation-iteration-count: 1; /*value can be infinite if you want to it in loop */ 
 
} 
 

 
/* Safari 4.0 - 8.0 */ 
 

 
@-webkit-keyframes example { 
 
    0% { 
 
    background-color: red; 
 
    left: 0px; 
 
    top: 0px; 
 
    } 
 
    50%{ 
 
    background-color: yellow; 
 
    left: 200px; 
 
    top: 0px; 
 
    } 
 
    100% { 
 
    background-color: red; 
 
    left: 0px; 
 
    top: 0px; 
 
    } 
 
} 
 

 

 
/* Standard syntax */ 
 

 
@keyframes example { 
 
    0% { 
 
    background-color: red; 
 
    left: 0px; 
 
    top: 0px; 
 
    } 
 
    50%{ 
 
    background-color: yellow; 
 
    left: 200px; 
 
    top: 0px; 
 
    } 
 
    100% { 
 
    background-color: red; 
 
    left: 0px; 
 
    top: 0px; 
 
    } 
 
}

<div></div>