English 中文(简体)
页: 1
原标题:HTML5 transition perfomance on iPhone 4

The related question has been asked here: CSS3 or jQuery animation with given step

现在我要问的是,是否有一个过渡(CSS3或j Query)在Pi 4 / iPad 2上工作,让人们逐渐改变完全筛选的滑坡(磨损或甚至 frames,完全控制)并足够快地顺利?

关于

最佳回答

For maximum performance on iOS devices, use translateZ(0) or translate3d(0,0,0) in your transition/animation to enable hardware acceleration via the GPU.

http://www.html5rocks.com/en/tutorials/speed/html5/#toc-udio-fidelity”rel=“nofollow”http://www.html5rocks.com/en/tutorials/speed/html5/#toc-udio-fidelity

例如,你将如何执行:

CSS

.fadeOut{ -webkit-animation: fadeout 750ms; }
@-webkit-keyframes fadeout {
    0% { -webkit-transform: translateZ(0);
        opacity:1;
    }
    100% { -webkit-transform: translateZ(0);
        opacity:0;
    }       
}

.fadeIn{ -webkit-animation: fadein 750ms; }
@-webkit-keyframes fadein {
    0% { -webkit-transform: translateZ(0);
        opacity:0;
    }
    100% { -webkit-transform: translateZ(0);
        opacity:1;
    }       
}
问题回答

暂无回答




相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签