CODEWITHSUNDEEP
htmlcss
hzy111
hzy111

Reputation: 11

CSS Animation is flickering on Google Chrome / Chromium Based Browser

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

Upvotes: 1

Views: 1150

Answers (1)

Mike Skott
Mike Skott

Reputation: 301

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

Upvotes: 1

Related Questions