旋转关键帧逆时针旋转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不使用带正矢量的顺时针旋转。