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

Question

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

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

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

http://codepen.io/kmathmann/pen/RaGqRr

---

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 不使用带正向量的顺时针旋转。