Delayed animation timing for different elements in a CSS 3D flip? - css

Question

So I have the basic setup for a CSS flip in this fiddle here: http://jsfiddle.net/6r82fzk6/
What this is: A CSS 3D Flip (container, card, front & back elements) with child elements on the front & back. The flip occurs on :hover for demonstration.
What I'm trying to achieve: To get the back element to transition slower than everything else. So by the time the card flips and the back side is visible, the child element of the back face (#be) is halfway through its transition.
What I have so far: Code snippet below. You may open the JSFiddle link to see it in action. Its the black gradient element I'm aiming to delay.
#container {
perspective: 800px;
position: relative;
width: 300px;
height: 300px;
margin: 1px auto;
}
#card {
transform-style: preserve-3d;
transition: all 1s ease-in-out;
position: relative;
}
#container:hover #card {
transform: rotateY(180deg);
}
#front,
#back {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 300px;
backface-visibility: hidden;
transform-style: preserve-3d;
}
#front {
background: red;
z-index: 2;
}
#back {
transform: rotateY(180deg);
background: blue;
}
#fe,
#be {
position: absolute;
top: 20px;
left: 20px;
transform: translateZ(50px);
}
#fe {
width: 50px;
height: 50px;
background: gold;
box-shadow: 0 0 4px black;
}
#be {
width: 260px;
height: 260px;
box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.6), 0 1px 3px whitesmoke inset;
background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}
<!-- Outside container -->
<div id="container">
<!-- Card being flipped -->
<div id="card">
<!-- Front face -->
<div id="front">
<!-- Front Child element -->
<div id="fe"></div>
</div>
<!-- Back face -->
<div id="back">
<!-- Back Child element -->
<div id="be"></div>
</div>
</div>
</div>
To clarify: This is not production code, its more for testing and understanding. I'm exploratory like that.

Answer 1

You can not do it in you current setup.
This is because you are not moving the front or the back, but the container.
If you want them to move differently, you have to move them directly instead of the container
#container:hover #front {
transform:rotateY(180deg);
}
#container:hover #back {
transform:rotateY(360deg);
}
#front {
transition:all 1s ease-in-out;
}
#back {
transition:all 2s ease-in-out;
}
demo