CSSアニメーションを逆方向に再利用する（状態をリセットすることによって）

Question

CSSで2つのキーフレームアニメーションを使用しました。 1つは左から右に移動し、もう1つは正確に同じ値を使用しますが、逆にします。

@keyframes moveLeft 
{ 
    from {transform: translate3d(50px, 0, 0);} 
    to {transform: translate3d(0px, 0, 0);} 
} 


@keyframes moveRight 
{ 
    from {transform: translate3d(0px, 0, 0);} 
    to {transform: translate3d(50px, 0, 0);} 
} 

ただし、1つのキーフレームアニメーションのみを使用できるかどうかは疑問です。 animation-direction: reverseを追加するとすぐに、アニメーションは1回しか再生されません。これはおそらく一度だけ使用された情報を保存します。 この情報をどうにかリセットできますか？または、アニメーションを異なる方向に2回使用する可能性はありますか？

http://jsfiddle.net/vrhfd66x/

Answer 1

（JSを使用せずに）いいえ、一人でCSSを使ってアニメーションを再起動する方法はありません。 JavaScriptを使用して要素からアニメーションを削除し、それを要素に再適用してから（遅延後に）再起動する必要があります。

以下W3C's CSS3 Animation Specが言うことである（別のコンテキストではなく、点も、この場合のために良い保持する必要があります）：「アニメーション名」の値を変更することが必ずしもないことも

注意をアニメーションを再開します（アニメーションのリストが適用され、リストから削除されたアニメーションのみが停止し、他のアニメーションは続行されます）。 アニメーションを再開するには、アニメーションを削除してから再適用する必要があります。

^{重点がクリスCoiyerによってこのCSS Tricks Article鉱山}

でも同じことを示し、アニメーションを再開するためのいくつかのJSソリューションを提供しています。 （注：この記事では、継続時間、繰り返し回数などのプロパティを変更するとWebkitで再起動されると主張しているOliのdabbletへの参照がありますが、Chromeでは動作しなくなったため古くなっているようです）。

---

概要：あなたはすでに、次の触れているが

が、私は完全酒のために再繰り返し処理するつもりです：アニメーションが要素に適用されると

• 、それが除去されるまで要素上に残る。
• UAは、要素上にあるアニメーションとそれが完了したかどうかを追跡します。
• 同じアニメーションを:checked（異なる方向ですが）に適用すると、要素に既にアニメーションが存在するため、UAは何も行いません。
• チェックボックスをクリックしている間に位置（瞬時）が切り替わるのは、:checkedセレクタ内に適用されたtransformです。アニメーションの存在によって違いはありません。

---

ソリューション：

あなたは、単一のアニメーションでこれを達成するため、以下のスニペットから見ることができるようにJavaScriptを使用しても、かなり複雑です。

var input = document.getElementsByClassName("my-checkbox")[0]; 
 

 
input.addEventListener('click', function() { 
 
    if (this.checked) { 
 
    this.classList.remove('my-checkbox'); 
 
    window.setTimeout(function() { 
 
     input.classList.add('anim'); 
 
     input.classList.add('checked'); 
 
    }, 10); 
 
    } else { 
 
    this.classList.remove('anim'); 
 
    window.setTimeout(function() { 
 
     input.classList.remove('checked'); 
 
     input.classList.add('my-checkbox'); 
 
    }, 10); 
 
    } 
 
});

input { 
 
    transform: translate3d(50px, 0, 0); 
 
} 
 
.my-checkbox { 
 
    animation: moveLeft 1s; 
 
    animation-direction: reverse; 
 
} 
 
.checked { 
 
    transform: translate3d(0px, 0, 0); 
 
} 
 
.anim{ 
 
    animation: moveLeft 1s; 
 
} 
 
@keyframes moveLeft { 
 
    from { 
 
    transform: translate3d(50px, 0, 0); 
 
    } 
 
    to { 
 
    transform: translate3d(0px, 0, 0); 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<input type="checkbox" class="my-checkbox">

ので、最良のオプションは（あなたがCSSアニメーションに固執する場合）使用に二つの異なるアニメーションです。

また、Marceloのコメントを見ることもできます。実際のユースケースが正確にフィドルで提供されるものであれば、transitionで十分であり、animationは必要ありません。トランジションは本質的に順方向と逆方向の両方で働くことができ、したがってより安全な賭けになります。