CSS3トランジション、キーフレーム、アニメーション

Question

私はトランジションやアニメーションで遊んでいましたが、私はそれらを使ってホバーを最大限に活用したいと思っていました。

アニメーションを上に乗せた後で、アニメーションを上に乗っている間に必ずしも起こらせることが可能かどうか疑問に思っていました。たとえば、関連する段落がぶら下がった後で、画像をスライドインして不透明度を変更したい場合、セクションのマウスを維持しないと、どうやってそれを維持できますか？

私の最後の質問は、キーフレームに似たものをトランジションで使用できるかどうかです。私は、元の状態に戻るのではなく元の状態に戻るため、トランジションが好きです。

私はjsfiddleをいくつかの基本的なコード例で作成しました。私はそれらを拡張する方法が不思議です。うまくいけば、私が説明しようとしていることを明確にするのに役立ちます。

jsfiddle

Says I need code to link jsfiddle 

は、彼らは最初はちょうど私が一度ホバリング後に残るしたい（左から右へ）アニメーションで、非常に単純です。

第二は、（左から右へ）の移行である、と私はそれを次のアニメーションに似たアニメーションを作ることができる場合、私は疑問に思って、私はバイオリンを更新

Answer 1

（左へ右へ左）here

しかし、「左から右へ」は、トランジションによって達成することはできません。 遷移には開始ステータスと終了ステータスのみがあるため、中間ステータスは処理できません。 ここを見てください。 https://developer.mozilla.org/en-US/docs/Web/CSS/transition

キーフレームによって「左から右」を達成できます。例えば。

@keyframes slideRight { 
    0% { 
     margin-left: 0em; 
     } 
     50% { 
     margin-left: 2em; 
     } 
     100% { 
     margin-left: 0em 
     } 
    }