CSS3 rotate3d动画重复答案

【问题标题】：CSS3 rotate3d animation repeatingCSS3 rotate3d动画重复
【发布时间】：2016-10-30 09:01:48
【问题描述】：

我有这个动画：

div
{
    width: 100px;
    height: 100px;
    margin: 50px 0 0 50px;
    background: maroon;
    animation: spinner 1s infinite linear;
    perspective: 500px;
    transform-style: preserve-3d;
}

@keyframes spinner {
    0% { transform: rotate3d(1, 1, 1, 0deg); }
    50% { transform: rotate3d(1, 1, 1, 180deg); }
    100% { transform: rotate3d(1, 1, 1, 360deg); }
}

http://jsfiddle.net/8Sg3h/

我希望正方形以一种方式无限旋转。目前它在从 0 到 360 的所有轴上旋转，然后从 360 以相同的方式旋转到 0。我希望它继续单向旋转，而不是自行返回。

我见过很多连续旋转的例子，但大多数都使用旋转或变换，而不是 rotate3d。是否可以使用 CSS rotate3D 无限旋转？

【问题讨论】：

这个works in Chrome。必须是特定于浏览器的问题。
没错，有什么办法让它跨浏览器工作？
@Jon：这是一个老问题，但请检查我的答案

标签： css css-animations rotateanimation

【解决方案1】：

语法是正确的，但您需要包含特定于浏览器的关键帧动画及其特定于浏览器的变换：

因此，例如，对于基于 Webkit 的浏览器，您需要添加以下内容：

div{
    -webkit-animation: spinner 1s infinite linear;
}

@-webkit-keyframes spinner {
    0% { 
       -webkit-transform: rotate3d(1, 1, 1, 0deg);
       -ms-transform: rotate3d(1, 1, 1, 0deg);
       -o-transform: rotate3d(1, 1, 1, 0deg);
       transform: rotate3d(1, 1, 1, 0deg);
    }
    50% { 
       -webkit-transform: rotate3d(1, 1, 1, 180deg);
       -ms-transform: rotate3d(1, 1, 1, 180deg);
       -o-transform: rotate3d(1, 1, 1, 180deg);
       transform: rotate3d(1, 1, 1, 180deg);
    }
    100% { 
        -webkit-transform: rotate3d(1, 1, 1, 360deg);
       -ms-transform: rotate3d(1, 1, 1, 360deg);
       -o-transform: rotate3d(1, 1, 1, 360deg);
       transform: rotate3d(1, 1, 1, 360deg);
    }
}

查看完整示例的 fiddle，它在支持动画和 transform3d 的主流浏览器中工作：

小提琴： http://jsfiddle.net/8Sg3h/84/

【讨论】：

你确定这是正确的吗？我认为例如 Opera 浏览器会忽略整个关键帧块，因为它以 -webkit- 开头。所以我猜你必须将每个浏览器特定的转换移动到它自己的浏览器特定的关键帧块中。像这样：@-ms-keyframes spinner {0%{ -ms-transform: rotate3d(1,1,1,0deg);}} 50%{...}...}
@Humppakäräjät：你说得对，这只是为了不用写太多代码，你可以在链接的 Fiddle 中看到整个示例。
当然我没有检查 Fiddle ;-) 现在我检查了...你不能从不针对特定浏览器的块中删除所有浏览器特定的转换吗？例如，您在“-webkit-keyframes”块中有“-ms-transform”，但您也有一个带有“-ms-transform”的“-ms-keyframes”块。

【解决方案2】：

我已经删除了 %50% 的关键帧，
现在正方形似乎向一个方向旋转。

之前：

@keyframes spinner {
   0% { transform: rotate3d(1, 1, 1, 0deg); }
   50% { transform: rotate3d(1, 1, 1, 180deg); }
   100% { transform: rotate3d(1, 1, 1, 360deg); }
}

之后：

@keyframes spinner {
0% { transform: rotate3d(1, 1, 1, 0deg); }
50% { transform: rotate3d(1, 1, 1, 180deg); }
100% { transform: rotate3d(1, 1, 1, 360deg); }
}

小提琴// http://jsfiddle.net/8Sg3h/138/

【讨论】：