CSSのアニメーションを持つ要素にネストされたCSSトランジションを使用するときのトラブル

Question

トランジションのみを使用するかアニメーションのみを使用するとすべてがうまくいくはずですが、混合物を使用して動作させる方法を考えることができません。

基本的には、フェードインしたい外側の要素が1つあり、フェードが完了した後にスライドしたい内側の要素があります。

私の本当の例は複雑なので、私が何を追及するのかを示すフィドルを作成しました。

ここで下のバーを上のバーと同様に動作させるにはどうすればよいですか？ （scaleXの違いは別として）。問題は、一番上のように開いてアニメーション化するのではなく、一番下の青いバーが完全に直ぐに現れることです。この例では

https://jsfiddle.net/joshuaohana/sqsLc5sd/ ちょうどあなたがanimate代わりのanimationを使用しているいずれかの色のボックス

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

<p></p> 

<div class="outer2"> 
    <div class="inner2"> 
    </div> 
</div> 

.outer { 
    width: 300px; 
    height: 100px; 
    background-color: red; 
    opacity: 0.1; 
} 
.outer .inner { 
    height: 100px; 
    width: 0; 
    background-color: blue; 
} 
.outer:hover { 
    opacity: 1; 
    transition: opacity 1s; 
} 
.outer:hover .inner { 
    width: 100px; 
    transition: width 1s 0.5s; 
} 

.outer2 { 
    width: 300px; 
    height: 100px; 
    background-color: red; 
    opacity: 0.1; 
} 
.outer2 .inner2 { 
    height: 100px; 
    width: 0; 
    background-color: blue; 
} 
.outer2:hover { 
    opacity: 1; 
    transition: opacity 1s; 
} 
.outer2:hover .inner2 { 
    width: 100px; 
    animate: widen 1s 0.5s forwards; 
} 

@keyframes widen { 
    from { 
     transform: scaleX(0); 
    } 
    to { 
     transform: scaleX(1); 
    } 
} 

Answer 1

の上に置きます。 scaleX()の代わりにtranslateXも使用しますが、おそらく問題ありません。また、ルールのアニメーションの初期状態を.inner2に設定し、アニメーションを簡略化してtoまたは100%のステップのみを指定します。

.outer { 
 
    width: 300px; 
 
    height: 100px; 
 
    background-color: red; 
 
    opacity: 0.1; 
 
} 
 
.outer .inner { 
 
    height: 100px; 
 
    width: 0; 
 
    background-color: blue; 
 
} 
 
.outer:hover { 
 
    opacity: 1; 
 
    transition: opacity 1s; 
 
} 
 
.outer:hover .inner { 
 
    width: 100px; 
 
    transition: width 1s 0.5s; 
 
} 
 

 
.outer2 { 
 
    width: 300px; 
 
    height: 100px; 
 
    background-color: red; 
 
    opacity: 0.1; 
 
    transition: opacity 1s; 
 
    overflow: hidden; 
 
} 
 
.inner2 { 
 
    height: 100px; 
 
    transform: translateX(-100%); 
 
    background-color: blue; 
 
    transform-origin: 0; 
 
} 
 
.outer2:hover { 
 
    opacity: 1; 
 
} 
 
.outer2:hover .inner2 { 
 
    width: 100px; 
 
    animation: widen 1s forwards; 
 
    animation-delay: .5s; 
 
} 
 

 
@keyframes widen { 
 
    to { 
 
     transform: translateX(0); 
 
    } 
 
}

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

 
<p></p> 
 

 
<div class="outer2"> 
 
    <div class="inner2"> 
 
    </div> 
 
</div>