JSを使わず、animationプロパティを使ってマウスホバー時のスライドを作りました

JSを使わず　 animationプロパティを使ってマウスホバーした時画像がスライドするを作ってみました。

animation と @keyfram を使って画像をスライダーしてみた。

これのcodeをQiitaに掲載
#webエンジニア#animation #HTML pic.twitter.com/6yOEGZtEZW

— トモゑ☛Web作成の37🌺 (@swan2pink) May 14, 2021

codepenでコードを書いてみました

See the Pen VwpazmV by トモゑ☛Web作成の37🌺 (@swan2pink) on CodePen.

.main1 {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden; ※
}
.second {
  position: absolute;
  top: 0;
  left: 0;
}

@keyfram　でスライドした際の画像格納場所をどうすれば良いかを悩みました。
結果、overflow: hiddenを親要素につけたら上手に納まりました。

参考資料
overflow:hiddenやscrollが効かない原因と対応方法

まとめ

こんなcodeもシンプルで良いですよとかありましたらご連絡ください
とっても喜びます！

今回は以上です
ありがとうございます！！