CSS Animation is flickering on Google Chrome / Chromium Based Browser - html

Question

For some reason the svg icon in this css animation is flickering sometimes on Chromium based Browsers. On Safari and Firefox it works flawlessly. How can I fix that? Has something to do with transform: translate? I've also tried to paste -webkit-transform:translate3d(0,0,0); which should solve the problem but unfortunately it didn't.
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.u-loading {
width: 128px;
height: 128px;
display: block;
margin: 48px;
}
.u-loading__symbol {
background-color: #4caf50;
padding: 8px;
animation: loading 3s infinite;
border-radius: 5px;
}
.u-loading__symbol img {
display: block;
max-width: 100%;
animation: loading-icon 3s infinite;
}
#keyframes loading {
0% {
transform: perspective(250px) rotateX(0deg) rotateY(0deg);
}
15% {
background-color: #4caf50;
}
16% {
background-color: #b44646;
}
50% {
transform: perspective(250px) rotateX(180deg) rotateY(0deg);
background-color: #b44646;
}
65% {
background-color: #b44646;
}
66% {
background-color: #4caf50;
}
100% {
transform: perspective(250px) rotateX(180deg) rotateY(-180deg);
}
}
#keyframes loading-icon {
0% {
transform: perspective(250px) rotateX(0deg) rotateY(0deg);
}
15% {
transform: perspective(250px) rotateX(0deg) rotateY(0deg);
}
16% {
transform: perspective(250px) rotateX(180deg) rotateY(0deg);
}
50% {
transform: perspective(250px) rotateX(180deg) rotateY(0deg);
}
65% {
transform: perspective(250px) rotateX(180deg) rotateY(0deg);
}
66% {
transform: perspective(250px) rotateX(180deg) rotateY(180deg);
}
100% {
transform: perspective(250px) rotateX(180deg) rotateY(180deg);
}
}
<div class="u-loading">
<div class="u-loading__symbol">
<img src="https://kaiser.kiwi/assets/kaiserkiwi-logo.svg">
</div>
</div>
Thank's in advance

Answer 1

I'm looking at your example in Chrome and the animation looks pretty slick. The only "flicker" I see is a brief glimpse of the back of the red div's image at the very end of it's transition. I think this can be solved by using backface-visibility: hidden; on the element you are transforming to flip over.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility