使用嵌套在具有css動畫的元素中的css轉換問題

Question

如果我僅使用轉換或單獨使用動畫，我可以使所有工作都成功，但似乎無法解決如何使混合使用工作。

基本上我有一個我想淡入的外部元素，然後是一個內部元素，我想在淡入淡出完成後滑入。

我的真實例子很複雜，所以我創建了一個小提琴，它演示了我要做的事情。

我怎樣才能得到這裏的底部酒吧行爲類似於頂部？ （除了ScaleX的差異）。問題在於底部的內部藍色條顯示爲完整的直線，而不是像頂部一樣開啓動畫。

https://jsfiddle.net/joshuaohana/sqsLc5sd/ 對於這個例子要麼彩盒只需將鼠標懸停

<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

您使用animate代替animation。我也會使用translateX而不是scaleX()，但它可能沒有關係。我還會在.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>