CSS3 旋转动画在 Iphone 上不起作用答案

【问题标题】：CSS3 Spinning Animation doesn't work on IphoneCSS3 旋转动画在 Iphone 上不起作用
【发布时间】：2015-03-04 12:49:52
【问题描述】：

当我在 Iphone 上测试这个 CSS3 动画时，谁能告诉我为什么它拒绝工作？它在 Chrome 上运行良好。

    .heartbeat:after {
        content: "\f118";
        font-family: fontAwesome;
        font-size: 50px;
        color: rgb(0, 156, 255);
        -webkit-animation: spin 1000ms ease 0s infinite normal;
        -moz-animation: spin 1000ms ease 0s infinite normal;
        -ms-animation: spin 1000ms ease 0s infinite normal;
        -o-animation: spin 1000ms ease 0s infinite normal;
        animation: spin 1000ms ease 0s infinite normal;
    }

    @-ms-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @-moz-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @-webkit-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }

我检查了类似的问题并尝试将from和to替换为0%和100%，并且一次旋转180度，改用rotate3d；没用。

【问题讨论】：

你在Desktop Safari上测试过吗？我的预感是这可能与 Safari 而不是 iOS 特定问题有关。
Applying WebKit transitions to Pseudo Elements 的可能重复项。显然这现在已在 Chrome 中修复，但尚未在 Safari 中修复 css-tricks.com/…
你在 moz 动画上使用 webkit 前缀？与 -ms- 前缀一样吗？

标签： ios iphone css animation

【解决方案1】：

这背后是有原因的。你这里有一个错误：

  @-ms-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @-moz-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @-webkit-keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }
    @keyframes spin { 
        from { -webkit-transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); }
    }

注意这里有什么，例如？

@-moz-keyframes spin { 
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

您正在使用-moz- 关键帧，这很好，但注意到其他了吗？

转换上的-webkit- 前缀怎么样？

所以，本质上，这将变成：

@-moz-keyframes spin { 
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

对其他关键帧重复此操作，这应该可以解决一两个问题...

【讨论】：

这有多奇怪。我正在使用相同的动画方法来解决我的微调器不使用 iOS 旋转的问题，并确保前缀正确。起初，我的微调器是 display:none 但是当我单击一个按钮时，它会触发 CSS 更改为 display:block ... 但不会旋转。当页面正在处理时（它是一个很长的服务器进程），如果我离开（例如 google.com）然后点击返回然后突然它就在动画中间。
将其更改为更改可见性而不是显示。它奏效了。只是把它放在那里，以供任何有未来问题的人使用。