As a workaround, I decided to create a mockup of the scenario since developing a testable version wasn't straightforward. However, here is the gist of the issue:
@keyframes mainFadeIn {
0% {
opacity: 0;
transform: translateY(-3rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
// If I use this, without the transform, then everything works.
//
// @keyframes mainFadeIn {
// 0% {
// opacity: 0;
// }
//
// 100% {
// opacity: 1;
// }
// }
.main {
animation-name: mainFadeIn;
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: linear;
background-color: gray;
width: 100%;
height: 16rem;
padding: 3rem;
}
.card {
transition: transform 500ms;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
perspective: 200px; // Ignore
margin: auto;
width: 30rem;
height: 10rem;
background-color: lightblue;
&.flipped {
transform: rotateY(-180deg);
}
}
.front,
.back {
backface-visibility: hidden;
}
.back {
transform: rotateY(-180deg);
}<div class="main">
<div class="card">
<div class="front"></div>
<div class="back"></div>
</div>
</div>Hopefully this provides enough context to pinpoint the problem.
CodePen: https://codepen.io/anon/pen/owvqQP/
EDIT Well. It's probably this thing: css z-index lost after webkit transform translate3d
But I still can't get it to work. The only solution would be to use position: relative; and top: 0; and top: -3rem; for the animations..