我在 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);
}
}
最佳答案
您仍然可以使用 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>
注意:这将解决您的问题,但它没有回答为什么 IE/Edge 不使用带正向量的顺时针旋转。
关于css - 旋转关键帧在 50% 和 75% 之间逆时针旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35989326/