transitionがうまく反映されないです

質問

すみません、ご教示下さい。

オンマウスで画像1から画像2へ0.6sで切り替わる箇所をやっていまして、
以下のHTMLとCSSだとクロームならできるのですが、IEとFirefoxだと
うまく反映されてきません。

実際はこれに吹き出しを付けたりしているのですが、
そちらはキーフレームを使っったらIEもFirefoxもうまく表示できたのですが、
「画像1から画像2へ切り替える」というのが作れなくて困っています。

うまくtransitionを反映させるか、キーフレームもしくは別の方法で
画像を切り替えることができませんでしょうか？

今、やっているものを一部記載いたしました。

何卒よろしくお願い申し上げます。

【HTML】
<div id="people-list">
<ul class="p01">
<li><a href="#"></a>
</ul>
</div>

【CSS】
.p01 li a { background: url(../img/img-people01-off.png) no-repeat; }

.p01 li a {
background-size: 320px 270px;
}

.p01 li a { background: url(../img/img-people01-off.png) no-repeat; }

.p01 li a {
width: 320px;
height: 270px;
display: block;
background-size: 320px 270px;
text-indent: -9999px;
transition: 0.6s;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
}
.p01 li a:hover { background-image: url(../img/img-people01-on.png); }

回答No.2

Proof4 · ベストアンサー

>No.1 補足コメント
CSSのほうで、.画像Aを.img-01に、.画像Bを.img-02とそれぞれ書き換えてテストしてみました。
Windows10のChrome、IE11、Firefoxのいずれでもマウスオーバーで正常な動作が確認されました。
もし、いまだ改善がないようでしたら、それぞれの:hoverにz-indexを記述して重なり方を指定してみるとよいかもしれません。

お礼

親身ご相談に乗っていただきまして、
誠にありがとうございました。

重なり方というか、後ろの画像が一回はフェードアウトするのですが、
たぶん以下の部分にheight:0は入っているものの、
なぜか再び画像が表示されてしまうという現象でした。

.interview03:hover .画像B {
width: 320px;
height: 0px;
animation: fadeout 0.6s linear 0s;
}

z-indexも後でためしてみようと思います。
今回、結果的にこちらにopacity:0を設定したことで
解決しました。

いわゆるオンマウスでポーズが変わる、
サムネイルをやっておりました。

心より御礼申し上げます。

またの際にもよろしくお願い致します。

回答No.1

Proof4

background-imageはアニメーションがもともとできない仕様です。（https://www.w3.org/TR/css3-background/#the-background-image）
クロームが仕様から外れているため、このような動作になるのでしょうね。
代替として参考URLのような方法もあります。

参考URL：

http://qiita.com/kubosho_/items/2b0486a0712e9b546614

お礼

Proof4さん

お世話になります。
ご回答ありがとうございました。

そうだったんですね。あまりにもアニメーションがかからないので仕様上かと疑いはじめてたところでした。
参考サイトの情報ありがとうございます。

参考にしてみます。

補足

Proof4　様

お世話になります。
昨日はご回答ありがとうございました。

あちらの記事を参考にして、以下のような
記述をしてみました。

すると0.6Sでふわっと変化する様子は見れたのですが、
アニメーションが終わると後ろの画像がパッとあらわれて
しまうような現象になります。

ここでずっと止まってしまてっておりまして、
おかしい箇所があるのでしょうか・・・？

もしお気づきのことがありましたらご教示いただきたく、
何卒よろしくお願い申し上げます。

【HTML】

<div class="interview03">
<div class="img-01"><img src="画像A"></div>
<div class="img-02"><img src="画像B"></div>
</div>

【CSS】

.interview03 {
position: relative;
width: 320px;
height: 270px;
}

.画像A { /* 後ろの画像 */
position: absolute;
display: none;
}

.interview03:hover .画像B {
width: 320px;
height: 0px;
animation: fadeout 0.6s linear 0s;
}

.interview03:hover .画像A {
display: block;
animation: fade-in 0.6s linear 0s;
}

@keyframes fadeout {
0% {
opacity :1;
height:270px;
}
95%{
height:270px;
}
100% {
opacity:0;
display: none;
}
}
@keyframes fade-in {
from{
opacity: 0;
}
to {
opacity: 1;
}
}