Trouble using css transitions nested in elements that have css animations - css

Question

I can get everything work if I use solely transitions, or solely animations, but I can't seem to work out how to make things work with the mixture.
Basically I have one outer element which I want to fade in, then an inner element I want to slide in after the fade is complete.
My real example is complex so I created a fiddle which illustrates what I'm going after.
How can I get the bottom bar here to behave similarly to the top one? (obv differences of scaleX aside). The issue is that the bottom inner blue bar shows up as full straight away, instead of animating open like the top one.
https://jsfiddle.net/joshuaohana/sqsLc5sd/
For this example just hover over either colored box
<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

You're using animate instead of animation. I would also use translateX instead of scaleX() but it probably doesn't matter. I would also set the initial state for the animation in the rule for .inner2, then simplify the animation and only specify the to or 100% step.
.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>