Question

我目前正在为我的公司构建一个新的移动响应网站，该网站在滚动条上使用了许多CSS3过渡来使图像成为焦点。效果非常惊人，适用于现代浏览器以及我的Google Nexus设备。

我遇到的问题是Apple Devices上的动画本身非常慢。我在第一代Ipad和iPhone上尝试过它们。在Nexus上，你可以滚动到动画所在的页面区域，它们会立即弹出。但是，在Apple设备上，您必须等待几秒钟才能触发动画。

我使用以下库来实现这些动画：

http://www.justinaguilar.com/animations/scrolling.html

如果您在Apple设备上浏览此网址，您将看到我对于需要一段时间加载的动画的意思。经过网上的一些研究后，我发现许多人认为可能是因为图形处理器没有在这些设备上踢，这意味着所有内容都是使用处理器（慢慢地）渲染的。为了解决这个问题，建议在动画中添加以下内容以确保图形处理器能够启动：

 -webkit-transform: translateZ(0);

然而，我已经尝试过这个无济于事。经过一些进一步的研究后，我发现很多人建议用translate3D替换translateX或translateY，但我还没有尝试过这个方法，因为我不明白我将如何转换下面的例子：

/*
==============================================
fadeIn
==============================================
*/

.fadeIn{
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 
    -webkit-transform: translateZ(0);
    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        transform: scale(1.1);  
    }
    80% {
        transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        transform: scale(1);
        opacity: 1; 
    }       
}

@-webkit-keyframes fadeIn {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        -webkit-transform: scale(1.1);
    }
    80% {
        -webkit-transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        -webkit-transform: scale(1);
        opacity: 1; 
    }       
}

因此我的问题有两个：

我如何转换上面的代码，以便它使用所谓的更快的transform3d或scale3d语法？

我是否可以使用其他方法来改善这些（Apple）设备的性能，使其与更符合标准的设备（如Nexus系列）的性能相匹配？

非常感谢任何帮助。

IOS设备上的CSS3动画效果很慢

0 个答案: