使用嵌套在具有css动画的元素中的css转换时出现问题

如果我只使用过渡，或者只使用动画，我可以让所有的东西都工作，但是我似乎不知道如何使用混合体来工作

基本上我有一个外部元素我想淡入，然后一个内部元素我想在淡入完成后滑入

我的真实例子很复杂，所以我制作了一把小提琴来说明我在追求什么

我怎样才能让底部的条与顶部的条表现得相似？（除scaleX的obv差异外）。问题是底部的内部蓝色条会直接显示为“完全”，而不是像顶部一样设置“打开”动画

对于本例，只需将鼠标悬停在任一彩色框上即可

<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);
    }
}

.外部{
宽度：300px；
高度：100px；
背景色：红色；
不透明度：0.1；
}
.外部.内部{
高度：100px；
宽度：0；
背景颜色：蓝色；
}
.外部：悬停{
不透明度：1；
过渡：不透明度1s；
}
.外部：悬停。内部{
宽度：100px；
过渡：宽度1s 0.5s；
}
.outer2{
宽度：300px；
高度：100px；
背景色：红色；
不透明度：0.1；
}
.外部2.内部2{
高度：100px；
宽度：0；
背景颜色：蓝色；
}
.outer2:悬停{
不透明度：1；
过渡：不透明度1s；
}
.outer2:悬停.inner2{
宽度：100px；
动画：向前加宽1秒0.5秒；
}
@关键帧变宽{
从{
变换：scaleX（0）；
}
到{
变换：scaleX（1）；
}
}

您使用的是

动画

而不是

动画

。我也会使用

translateX

而不是

scaleX（）

，但这可能并不重要。我还将在

.inner2

规则中设置动画的初始状态，然后简化动画，只将

指定为
或
100%
步骤


.outer{
宽度：300px；
高度：100px；
背景色：红色；
不透明度：0.1；
}
.外部.内部{
高度：100px；
宽度：0；
背景颜色：蓝色；
}
.外部：悬停{
不透明度：1；
过渡：不透明度1s；
}
.外部：悬停。内部{
宽度：100px；
过渡：宽度1s 0.5s；
}
.outer2{
宽度：300px；
高度：100px；
背景色：红色；
不透明度：0.1；
过渡：不透明度1s；
溢出：隐藏；
}
.2{
高度：100px；
转化：translateX（-100%）；
背景颜色：蓝色；
变换原点：0；
}
.outer2:悬停{
不透明度：1；
}
.outer2:悬停.inner2{
宽度：100px；
动画：向前加宽1s；
动画延迟：.5s；
}
@关键帧变宽{
到{
变换：translateX（0）；
}
}


oops关于打字错误（使用sass，这是我真实项目中的mixin名称），但感谢您的解决方案。似乎我有一对这样的错误组织和转换源帮助@JoshuaOhana sweet，没问题：）