旋转关键帧在 50% 和 75% 之间逆时针旋转

Question

我在 Internet-Explorer 和 Edge 中的旋转动画有问题。

我的动画像 Chrome 一样正常开始，但在达到 50% 后，它逆时针变为 75%，然后再次顺时针变为 100%；

我使用 rotate3d 因为它使用 GPU 而不仅仅是 CPU。

CSS

.rotate {
  -webkit-animation: rotate 5s normal linear infinite;
  animation: rotate 5s normal linear infinite;
}


@keyframes rotate {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
  25% {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
  }
  75% {
    -webkit-transform: rotate3d(0, 0, 1, 270deg);
    transform: rotate3d(0, 0, 1, 270deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

Answer 1

您仍然可以使用 2d 变换并添加空 3d 变换 translateZ(0) 以强制使用 GPU：

.rotate {
 -webkit-animation: rotate 5s normal linear infinite;
 animation: rotate 5s normal linear infinite;
}

@-webkit-keyframes rotate {
 0% {
  -webkit-transform: rotateZ(0deg)  translateZ(0);
  transform: rotateZ(0deg) translateZ(0);
 }
 25% {
  -webkit-transform: rotateZ(90deg) translateZ(0);
  transform: rotateZ(90deg) translateZ(0);
 }
 50% {
  -webkit-transform: rotateZ(180deg) translateZ(0);
  transform: rotateZ(180deg) translateZ(0);
 }
 75% {
  -webkit-transform: rotateZ(270deg) translateZ(0);
  transform: rotateZ(270deg) translateZ(0);
 }
 100% {
  -webkit-transform: rotateZ(360deg) translateZ(0);
  transform: rotateZ(360deg) translateZ(0);
 }
}

@keyframes rotate {
 0% {
  -webkit-transform: rotateZ(0deg) translateZ(0);
  transform: rotateZ(0deg) translateZ(0);
 }
 25% {
  -webkit-transform: rotateZ(90deg) translateZ(0);
  transform: rotateZ(90deg) translateZ(0);
 }
 50% {
  -webkit-transform: rotateZ(180deg) translateZ(0);
  transform: rotateZ(180deg) translateZ(0);
 }
 75% {
  -webkit-transform: rotateZ(270deg) translateZ(0);
  transform: rotateZ(270deg) translateZ(0);
 }
 100% {
  -webkit-transform: rotateZ(360deg) translateZ(0);
  transform: rotateZ(360deg) translateZ(0);
 }
}

div {
 width: 50px;
 height: 50px;
 background-color: black;
 text-align: center;
}

div > span {
 color: white;
}

<div class="rotate" >
  <span>top</span>
</div>

Pen updated.

注意：这将解决您的问题，但它没有回答为什么 IE/Edge 不使用带正向量的顺时针旋转。

旋转关键帧在 50% 和 75% 之间逆时针旋转

rotate keyframe goes anticlockwise between 50% and 75%

css

internet-explorer

css-animations

microsoft-edge

CSS