マウスカーソルを当てている時間が短くてもホバーアニメーションを最後まで実行させる

Question

実現したいこと

【作成済動作】
①要素にマウスカーソルを当てると隠れていた画像がスライドしながら現れる
②カーソルを離ししばらくすると再び画像が隠れ元に戻る

こちらの①の動作を、カーソルが当たる時間が一瞬だとしても最後まで動作が完了するようにすることは可能でしょうか。

発生している問題・分からないこと

現状ではスライドの途中でカーソルを離すと画像が一部しか現れていない状態で動作が止まってしまいます。

●カーソルを最後まで当てている場合

●カーソルが一瞬のみ当たっている場合

サイト内検索で過去に類似質問（URL）がありましたが、JavaScript初心者のため自身の事例に置き換えた修正が出来ず、そもそも流用できる事例なのかも判断が出来ませんでした。
上記サイトの解決方法と同じである必要はありませんがご教示頂けますと幸いです。

該当のソースコード

<div class="sample">
	<img src="img.png">
</div>

/* 画像の親要素のスタイル */
.sample {
  overflow: hidden;
}

/* 画像のスタイル */
.sample img {
  width: 100%;
  height: 100%;
  transform: translateY(-100%);
  transition: transform 0.2s;
  transition-delay: 3s;
}

/* hoverすると画像が下がる */
.sample:hover img {
  transform: translateY(0);
  transition-delay: 0s;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

解決出来ませんでした。

補足

特になし

Comments

[yambejp]

質問が曖昧なので図示できませんか？

Answer 1

ちょっと微妙ですがこういうのでどうですか？
hover時にhoverクラスをつけ、transitionが終わったらはずす

<style>
.sample {
  overflow: hidden;
}
.sample img {
  width: 100%;
  height: 100%;
  transform: translateY(-100%);
  transition: transform .2s;
  transition-delay: 3s;
}
.sample:hover img ,
.sample.hover img {
  transform: translateY(0);
  transition-delay: 0s;
}
</style>
<script>
document.addEventListener('mouseover',({target})=>{
  if(target.matches('.sample')){
    target.classList.add('hover');
  }
});
document.addEventListener('transitionend',({target})=>{
  const hover=target.closest('.hover');
  if(hover){
    hover.classList.remove('hover');
  }
});
</script>
<div class="sample">
<img src="https://placehold.jp/100x100.png">
</div>

Comments

[enjoyannna]

図示の件遅くなり申し訳ありませんでした
今更ではありますが質問内容を編集し動画キャプチャを追加しております
上記コードで実現したい動作になりました、ありがとうございます！

[yambejp]

だいたいイメージ通りだったようでよかったです

[enjoyannna]

解決後の追加質問になり申し訳ありません
transform: translateY(-100%)が-100％の時は問題ないのですが、-50%に変更すると修正前同様に途中で止まってしまいました
上記の場合に同じ動作を行うには全く別のコードが必要でしょうか
質問の続きにあたると思いこちらに記載させて頂きましたが、ここでの問いが不適切であれば新規質問を作成致します