アニメーションからの遷移

Question

この単純な例では、ホバー上に右に動かすアニメーションを持つ要素があるとします。次に、マウスが元の位置にまっすぐジャンプする代わりに移動すると、その状態に戻ります。

#test{ 
 
    position:absolute; 
 
    left:0; 
 
    transition:left 3s linear; 
 
} 
 
#test:hover{ 
 
    animation:move 4s linear; 
 
} 
 
@keyframes move{ 
 
    0%{ 
 
    left:0; 
 
    } 
 
    100%{ 
 
    left:300px; 
 
    } 
 
}

<div id="test">Hover</div>

結果は、任意のエッジやChromeのいずれかで動作しません。 Firefoxは動作しますが、最初のアニメーションでのみ動作します。以降のアニメーションは、ページを更新するまで機能しません。これは可能ですか？そして、なぜFirefoxは一度動作して停止しますか？

これはわかりやすい例です。これはちょうどトランジションで行うことができますが、トランジションは限られており、必ずしも可能ではありません。また、任意の点から来ている可能性があるため、リターンアニメーションは不可能です。

Answer 1

アニメーションとトランジションのプロパティを使用するのではなく、トランジションプロパティのみを使用してこれを行うことができます。

#test{ 
    position:absolute; 
    left: 0; 
    transition: left 4s linear; 
} 
#test:hover{ 
    left: 300px; 
    transition: left 4s linear; 
} 

問題は、別の状態に移行するためにアニメーションを完了する必要があることです。さらに、マウスを外したときに、300pxから0pxにアニメーション化される非ホバーセレクタに別のアニメーションを追加する必要があります。これを修正するには、ホバーセレクタとノンホバーセレクタの中でトランジションプロパティを使用してください。しかし、これは本当に2つの状態の解決策です。アニメーションの細かい制御が必要な場合は、前方と後方の2つのアニメーションを作成することをお勧めします。

Answer 2

ホバー以外のセレクタでtransitionを使用してください。 animationの必要はありません。

#test { 
 
    position:absolute; 
 
    left: 0; 
 
    transition: left 4s linear; 
 
} 
 
#test:hover { 
 
    left: 300px; 
 
}

<div id="test">Hover</div>