Css Animation Rotate3d Not Working In Safari

I cannot get this animation to work in Safari 12 no matter what I try. I've tried vendor prefixes and all, but nothing works. It works fine in Chrome. Anyone have any ideas?

Solution 1:

Seems like both Safari and Firefox don't recognise the change between the two key frames. To solve this you can use an intermediate keyframe:

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

Demo:

@keyframes spinx {
  0% {
    transform: rotate3d(0, 1, 1, 360deg);
  }
  50% {
    transform: rotate3d(0, 1, 1, 180deg);
  }
  100% {
    transform: rotate3d(0, 0, 0, 0);
  }
}

.spinners {
  display: block;
  width: 100%;
  height: 4rem;
  overflow: hidden;
  position: relative;
}

.spinners:before,
.spinners:after {
  content: "";
  width: 4rem;
  height: 4rem;
  border: 3px solid red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -2rem00 -2rem;
  display: block;
  transform-origin: 50%50%0;
}

.spinners:before {
  animation: spinx 2s infinite linear;
}

.spinners:after {
  border-color: blue;
  animation: spinx 4s infinite linear alternate;
}

<divclass="box"><divclass="spinners"></div></div>

Share