there is an H5 page in the URL below. Scan the QR code.
the mobile phone preview on PC and Android is normal. The animation stops after playing, but it will play a series on the iphone and then disappear (such as the two rotating leaves on the first page).
https://www.xitieba.com/template/745/previewdebug after opening developer mode with Mac + iPhone safari.
the following answer comes from: https://div.io/topic/1670
I am an industrious porter.
Android and IOS html5 Animation Catton Solutions
1.IOS supports elastic sliding
body {
-webkit-overflow-scrolling:touch;}
2. Animation Catton's solution
2.1 change the position of the element using the new css3 attribute, trigger GPU (hardware acceleration) to assist in rendering the animation expand the reading point here
2.2 use the chrome developer tool to check whether the animation elements cause the rearrangement of a large number of DOM nodes around the (reflow),. If so, use absolute positioning for the animation elements, away from the document stream, and reduce the impact on the surrounding elements.
2.3Use backface-visibility,opacity,perspective for elements to be animated
here the main attribute is to set the animation element to render only the user-oriented side. Reduce the consumption of animation rendering on system performance.
{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-perspective: 1000;
perspective: 1000;}