私は、CSSだけを使ってメニュープロトタイプのスライドインアニメーションを簡単に実装しようとしています。CSS3アニメーションが応答しない
コード：それをトリガするためにターゲット：https://jsbin.com/lelizi/171/edit?html,css,output
は私が使用してリンクをクリックすると、アニメーションを再生することができています。問題は、透明アンカーdivをクリックしてメインスライドに戻ったときにアニメーションがトリガーされず、メインスライドに即座に戻るということです。
私には何が欠けていますか？
ありがとうございます。
あなたのCSSルールは異なる要素に設定されています。したがって、main-slideをターゲティングすると、その要素にアニメーションが設定されますが、left-slide要素には設定されません。あなたのleft-slide要素は全角であることを除いて、main-slide要素を対象とするのではなく、クリックするときにleft-slide要素の子要素を対象とする可能性があります。
あなたのアニメーションはとてもシンプルなので、代わりにトランジションを使用することをおすすめしますか？トランジションを使用して
デモ：https://jsfiddle.net/zuksntxb/
#left-slide {
transition : transform 400ms ease-in;
}
#left-slide:target {
transform : translateX(100%);
}
EDIT（ボーナスラウンド）：
（あなたが目標とされているもの以外の要素にCSSを設定することができますが、それは、その後の兄弟である必要がありますまたは次の兄弟の子孫）：
#main-slide:target ~ #left-slide {
/*DO SOMETHING TO #left-slide*/
}
これは、スライドのHTMLの順序を切り替える必要があります。また、あなたの左スライドがメインスライドを完全にカバーする方法とは実際には機能しません。