CSS Animations - Animation bug? - html

Question

I'm trying to use CSS animations to animate a cube rotating, and pausing on each face for a set amount of time.
Pen here
#keyframes frontToLeft {
75% { transform: rotateY(0); }
100% { transform: rotateY(90deg); }
}
#keyframes leftToBack {
75% { transform: rotateY(90deg); }
100% { transform: rotateY(180deg); }
}
#keyframes backToRight {
75% { transform: rotateY(180deg); }
100% { transform: rotateY(270deg); }
}
#keyframes rightToFront {
75% { transform: rotateY(270deg); }
100% { transform: rotateY(360deg); }
}
.cube-container {
padding-top: 200px;
perspective: 800px;
perspective-origin: 50% 100px;
}
.qube {
position: relative;
width: 200px;
margin: 0 auto;
transform-style: preserve-3d;
animation-name: frontToLeft, leftToBack, backToRight, rightToFront;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-duration: 2s, 2s, 2s, 2s;
animation-delay: 2s, 4s, 6s, 8s;
* {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
width: 200px;
height: 200px;
background: rgba(255,255,255,0.1);
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
}
<div class="cube-container">
<div class="qube">
<div class="front">front</div>
<div class="left">left</div>
<div class="back">back</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</div>
In Google Chrome and Edge, the animation seems to glitch, but in Firefox it works as intended.
I'd like the outcome to be:
Front Face - Pause 2 seconds, rotate 2 seconds
Left Face - Pause 2 seconds, rotate 2 seconds
Back Face - Pause 2 seconds, rotate 2 seconds
Right Face - Pause 2 seconds, rotate 2 seconds
Can anyone see where this would be going wrong? I have the Codepen preprocessing SCSS with prefixes.
Thanks in advance!

Answer 1

From what I can tell testing this it looks like a bug. Nothing I've tried seems to work to correct the animation. Like you say, Firefox works as expected.
All I can think of as a potential fix is to combine it into one animation something like this:
#keyframes spinCube {
20% { transform: rotateY(0deg); }
25% { transform: rotateY(90deg); }
45% { transform: rotateY(90deg); }
50% { transform: rotateY(180deg); }
70% { transform: rotateY(180deg); }
75% { transform: rotateY(270deg); }
95% { transform: rotateY(270deg); }
100% { transform: rotateY(360deg); }
}
.qube {
animation: spinCube 8s 1 forwards;
}
It would take a bit of tweaking to get the timing right, but it's the only thing I can think of.
Here's a CodePen Example of this alternative solution.