使用嵌套在具有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>