GoogleクロムでCSSトランジションが動作しない

Question

ディスプレイのプロパティを変更すると、Google Chrome（バージョン50）ではトランジションが実行されません（瞬時に実行されます）が、Firefox（バージョン44）とIE（バージョン11 ）。あなたはデモhereを見ることができます

HTML

<div class="outer"> 
    <div class="inner"> 
    </div> 
</div> 

CSS

.inner { 
    width: 100px; 
    height: 100px; 
    background: red; 
    transition: width 2s linear 1s; 
    display: inline-block; 
} 
.outer:hover .inner { 
    width: 300px; 
} 
.outer:hover { 
    display: inline-block; /* If I comment this, it will work */ 
} 

。

Answer 1

利用display: block;代わりのdisplay: inline-block;

.inner { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    display: block; 
 
} 
 
.outer:hover .inner { 
 
    width: 300px; 
 
    -webkit-transition: width 2s linear; 
 
    -moz-transition: width 2s linear; 
 
    -o-transition: width 2s linear; 
 
    transition: width 2s linear; 
 
} 
 
.outer:hover { 
 
    display: block; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    </div> 
 
</div>

Answer 2

左追加：ベース定義に0を、あなたはそれが行をコメントのようなものです