旋转关键帧在 50% 到 75% 之间逆时针旋转答案

【问题标题】：rotate keyframe goes anticlockwise between 50% and 75%旋转关键帧在 50% 到 75% 之间逆时针旋转
【发布时间】：2016-03-14 22:35:44
【问题描述】：

我在 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);
  }
}

【问题讨论】：

在等距分割时为什么需要这么多关键帧？
是的，没有它在 safari 中不起作用。而在 IE 中，它也不能仅在 0% 和 100% 的情况下工作，我需要三个部分才能使其工作。
注意：这里使用rotateZ()test没有错误。
是的，这项工作，但我认为它不使用 GPU，因为性能低于 transform3d。所以我不能用它。

标签： css internet-explorer css-animations microsoft-edge

【解决方案1】：

您仍然可以使用 2d 变换并添加 null 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 不使用正向量的顺时针旋转。

【讨论】：