Q&A
お世話になっております。
画像をhoverした時に画像を変更させつつもふわっとさせたいので、
transition-timing-function などを使っています。
表示自体は問題ないのですが、初手がカクつきます。ふわりと動きません。
何回かカーソルを合わせると問題ないです。
こちらのデモでご確認ください。
https://codepen.io/takamiii-158cm/pen/WVMEEE
こちらはブラウザの仕様なのでしょうか？
chromeで確認しています。
変更点や追記したほうが良い記述がありましたらご教示をお願いいたします。
pug
1div.imageGoods__gift01
sass
1.imageGoods 2 margin: 100px 3 width: 100% 4 height: 0 5 padding-top: (212 / 212)*100% 6 transition-duration: .3s 7 transition-timing-function: ease 8 &__gift01 9 @extend .imageGoods 10 background: url(https://tools.arashichang.com/212x212/D46A6A/ffffff.png?text=commodityblock_top01.jpg) no-repeat center center 11 background-size: contain 12 &:hover 13 background: url(https://tools.arashichang.com/212x212/cccccc/ffffff.png?text=commodityblock_top01_hover.jpg) no-repeat center center 14 background-size: contain
回答1件
0
ベストアンサー
画像が事前に読み込まれていないためです。
いくつか手がありますが、確実な方法は CSS 内にデータURLで埋め込む方法です。
https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
preload や prefetch でも先読みできますが、対応ブラウザや設定に気を付けてください。
https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content
https://developer.mozilla.org/ja/docs/Web/HTTP/Link_prefetching_FAQ
https://www.w3.org/TR/preload/
https://www.w3.org/TR/resource-hints/
投稿2019/11/27 09:18
総合スコア13749
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/29 04:55