I have created a unique flip animation that displays new numbers resembling an analog clock or calendar with a hinge in the middle.
The process is simple: using a div, I have:
- The bottom half of the first number on one side
- The top half of the second number rotated 180 degrees to show on the back
To reveal the new number, I rotate the entire div around the center of the container, displaying the back of the rotating div:
View Number flip animation in the latest Firefox
However, in Chrome, the animation does not always work as expected. Sometimes half of the content disappears until the animation is complete, and sometimes the old number doesn't render properly: Number flip animation in the latest Chrome with the bottom of the number not appearing until after the animation is complete
In Safari 12, the situation worsens as it seems to disregard the backface-visibility, even with the -webkit- prefix:
Safari 12 Number animation, the bottom half of the first number is inverted after the animation is complete
While the pre-Chromium Edge browser handles this issue well, the new Edge version (v83) experiences similar problems to Chrome.
I have tried adjusting the properties and have explored other questions related to backface-visibility on this platform.
Here is the code; hover over the numbers to witness the flip:
body {
background: #2e517d;
}
.container {
width: 175px;
height: 192px;
background: #4e9bfa;
position: relative;
left: 50%;
transform: translate(-50%, 50%);
perspective: 1000px;
}
.cover {
width: 175px;
height: 50%;
position: absolute;
top: 96px;
background-color: #34b58c;
transform: rotateX(0deg);
transform-style: preserve-3d;
transform-origin: top;
transition: all 0.5s ease-out;
}
.container:hover .cover {
transform: rotateX(180deg);
}
.flip {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.container p {
font-size: 1000%;
margin: 0;
}
.container>p {
height: 96px;
overflow: hidden;
}
.front-number-bottom {
position: relative;
height: 96px;
overflow: hidden;
background-color: red;
}
.front-number-bottom p {
margin: 0;
position: relative;
top: -96px;
}
.back-number-top {
position: relative;
height: 96px;
overflow: hidden;
}
.back-number-bottom {
height: 96px;
overflow: hidden;
position: relative;
z-index: -1;
}
.back-number-bottom p {
margin: 0;
position: relative;
top: -96px;
}
div.front {
background: red;
}
div.back {
background: green;
transform: rotateX(180deg);
}<body>
<div class="container>
<p>76</p>
<div id="cover" class="cover">
<div class="flip front">
<div class="front-number-bottom">
<p>76</p>
</div>
</div>
<div class="flip back">
<div class="back-number-top">
<p>77</p>
</div>
</div>
</div>
<div class="back-number-bottom">
<p>77</p>
</div>
</div>
</div>
</body>Is this a viable approach that can be easily rectified in Chromium browsers and Safari?
Would an alternate approach be more effective?