cssアニメーションの動きをうまく実装できない
解決したいこと
cssアニメーションで、文字をhoverした際に、右にスライドさせる動きを実装しています。
最初と最期の動きをゆっくりさせたく、下記のコードを挿入しました。
animation-timing-function: ease-in-out
しかし、hoverを離した際の最後の動きだけすばやく戻ってしまい、コードが効きません。
animation-durationやtransitionも試してみたのですが、すべてうまく行きませんでした。
具体的なコードを下記に記載しました。
.p-fishing {
&__link {
position: absolute;
bottom: 0;
right: 0;
// 右スライドの動き
&:hover .p-fishing__link-title {
cursor: pointer;
animation: example 0.3s forwards;
animation-timing-function: ease-in-out;
}
}
}
@keyframes example {
0% {
right: vw($width, 100px);
}
100% {
right: vw($width, 92px);
}
}
参考にしたサイト
https://www.asobou.co.jp/blog/web/css-animation
https://digitor.jp/textbook/css-animation/
コーディング初心者のため、分かりづらい質問となってしまい申し訳ありません。
どなたか、ご教示いただけますと大変ありがたく存じます。
どうぞよろしくお願いいたします
0
