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が効かない原因と対応方法] (https://csshtml.work/overflow-bad/)

まとめ

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

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