background-imageをtransitionさせる

Css

最近Webサイトを作っていて、background-imageを多用するんです。いろんな場面でとても便利に使っていたのですが、transitionがFire foxでは動作しないことに気付いてしまいました…。

Google先生にいろいろ聞いてわかったのですが、backgrounf-imageがchromeでtransition出来てしまうのは、chrome側がW3C仕様に準拠していないためなんですね。なのでFire foxやIE11の動作が正しいと。なるほどなるほど。

個人的にchromeの動作は物凄くありがたいんですけど…そうだったのか~~~(´・ω・`)

ですがbackground-imageはtransitiionさせないと何かと不便なので、諦めるしかないかな―と思いつつ試行錯誤…。
なんとか使えそうな代替え案を作成してみました。

Attention Required! | Cloudflare

imgタグであればtransition効きますので、ホバーするとopacityでフェードイン・アウトします。

divにimg入れておかないといけなかったりするので、background-imageほど自由にはなりませんが動きは再現できますので使えそうな時に使うようにしようかと!

修正前

HTML


<div class="bg">
<p class="btn""></p">
</div>

CSS

.btn {
 background: url(https://www.blackmage.site/wp-content/uploads/2017/08/sample.png) no-repeat;
 transition: all .5s ease;
 -webkit-transition: all .5s ease 0s;
 -moz-transition: all .5s ease 0s;
 -ms-transition: all .5s ease 0s;
 -o-transition: all .5s ease 0s;
 }

.btn:hover {
 background: url(https://www.blackmage.site/wp-content/uploads/2017/08/sample_hover.png) no-repeat;
 }

修正後

HTML


<div class="bg">
<p class="btn"><img src="https://www.blackmage.site/wp-content/uploads/2017/08/sample_hover.png" alt="サンプルボタン"></p>
</div>

CSS

.bg {
    margin: 0 auto;
    width: 200px;
    height: 200px;
}

.bg {
    background: url(https://www.blackmage.site/wp-content/uploads/2017/08/sample.png) no-repeat center top;
}

.btn {
    margin: 0 auto;
}

.btn>img {
    display: block;
    margin: 0 auto;
    transition: all .5s ease 0s;
    -webkit-transition: all .5s ease 0s;
    -moz-transition: all .5s ease 0s;
    -ms-transition: all .5s ease 0s;
    -o-transition: all .5s ease 0s;
    opacity: 0;
}

.btn>img:hover {
    opacity: 1;
}

コメント

  1. […] background-imageをtransitionさせる […]