Why won't this 3d css animation work on mobile?

Admin 1
Viewed 471

I have this 3d rotating text css animation working on chrome desktop, but it won't work on mobile. I tried adding webkit prefixes but nothing will get it to work on iphone. Any obvious reasons why?

https://codepen.io/warpigs666/pen/bGqQbzL

@keyframes turn {
  from { transform: rotate3d(0, 0, 0, 0); }
  to { transform: rotate3d(1, 0, 0, 360deg); }
}

.container {
  width: 2rem;
  height: 2rem;
  perspective: 1000px;
  margin: 100px;
}

.cube {
  position: relative;
  width: 2rem;
  height: 2rem;
  transform-style: preserve-3d;
  animation: turn 3s linear infinite;
}

.face {
  height: 2rem;
  background: white;
  backface-visibility: hidden;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 2rem;
  transition: transform 500ms;
}

.top {
  transform: translateY(-1rem) rotateX(90deg);
}
.front {
  transform: translateZ(1rem);
}
.bottom {
  transform: translateY(1rem) rotateX(-90deg);
}
.back {
  transform: translateZ(-1rem) rotateX(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .cube {
    animation: none;
    transform: rotate3d(1, 1, 0, 45deg);
  }
}
css-animations transform css
1 Answers

I was able to reproduce your bug in both Mobile Safari on iOS and desktop Safari on my Mac, so the bug appears to have at least been related to Safari in general, not necessarily mobile-specific. Safari apparently does not like rotate3d transform animations with only 2 keyframes.

The fix boils down to adding an intermediate keyframe to the @keyframes CSS (see 50%):

@keyframes turn {
  0% {
    transform: rotate3d(1, 0, 0, 0deg);
  }

  50% {
    transform: rotate3d(1, 0, 0, 180deg);
  }

  100% {
    transform: rotate3d(1, 0, 0, 360deg);
  }
}

Here's an updated Codepen with the fix in action:

https://codepen.io/maqam7/pen/OJpaypZ

Note that I removed most of the prefixed rules while debugging, but also because they're unnecessary in newer versions of Safari (except -webkit-backface-visibility apparently). Up to you if you want to add them back in. Note that I also removed the transition styles on the .face class since they weren't doing anything.

I don't have access to an android phone, so I can't verify this works there. However, I can verify the above fix works in the latest (as of this writing) desktop Chrome (Mac), desktop Firefox (Mac), desktop Safari (Mac) as well as Mobile Safari on iOS.

Props to this Stack Overflow answer for providing the solution once I realized the problem was with Safari in general:

CSS Animation rotate3d not working in Safari

user_32431870
Related