Achieve 60 FPS Mobile Animations with CSS3

Key Points

• Smooth mobile animation requires attention to the synthesis steps in the critical rendering path (CRP), and use attributes such as transform and opacity to avoid increasing the burden on previous steps.
• Avoid using left, top, right, bottom, transform attributes for animation transitions, they will cause unsmooth animations; use
attributes that affect the synthesis step to let the browser start the animation at the beginning of the animation Determine the layer stability before.
• will-changeTo achieve a stable frame rate of 60 frames per second, use the GPU to render the animation, and promote the element to another layer through the
attribute, avoiding the browser handling layout rendering or drawing.

This article was originally published in OutSystems. Thanks to the partners who support SitePoint.

It's easy to make animations in mobile apps. It's also easy to animate correctly in mobile apps if you follow the following tips… Although everyone uses CSS3 animations on mobile devices these days, many people use them incorrectly. Best practices are often overlooked by developers. This is because people don’t understand why these practices exist and why they are so strongly supported. The equipment specifications are very wide. Therefore, if the code is not optimized, it will provide a sub-standard experience to most users. Remember: some high-end flagship devices are powerful, but most people in the world use devices that are like an abacus with an LCD screen compared to these high-performance devices. We want to help you take advantage of the power of CSS3 correctly. To do this, we need to understand something first.

Understanding the timeline

What does the browser do when rendering and processing elements? This timeline is called the key rendering path:

Image source: www.csstriggers.com

To achieve smooth animation, we need to focus on changing the properties that affect the synthesis step, rather than increasing the burden on the previous step.

1. Style

   The browser starts to calculate the style to be applied to the element - recalculate the style.

2. Layout left In the next steps, the browser generates the shape and position of each element—the layout. Here, the browser sets page properties such as width and height, and for example its margins or top, right, bottom,

   , , .

3. Draw The browser fills the pixels of each element into the layer. It refers to these properties: box-shadow, border-radius, color, background-color,

   , etc.

4. Composition This is where you want to perform animations, because this is when the browser draws all the layers onto the screen. transform Modern browsers can animate four style attributes well, using opacity and

   attributes.
   • transform: translateX(n) translateY(n) translateZ(n);Position —
   • transform: scale(n);Zoom —
   • transform: rotate(ndeg);Rotation —
   • opacity: n;Opacity —

How to achieve 60 frames per second

app-menuRemember this, it's time to roll up your sleeves and work hard. Let's start with HTML. We will create a very simple structure and put our layout in a

class.

<div>
  <div></div>
  <div>
    <div></div>
  </div>
</div>

Wrong method

.app-menu {
  left: -300px;
  transition: left 300ms linear;
}

.app-menu-open .app-menu {
  left: 0px;
  transition: left 300ms linear;
}

leftDid you see the properties we changed? Use top, right, bottom,

,

attributes for transition should be avoided. These do not create smooth animations because they force the browser to perform layout passes every time, which affects the child elements of all elements. The result is this:

This animation is not smooth enough. We used the DevTools timeline to check what was happening behind the scenes, and the results are as follows:

The green area indicates the time it takes to render the animation. This data shows irregular frame rates and slow performance. "The green bar means FPS. The high bar means the animation is rendered at 60 FPS. The low bar means below 60 FPS. So ideally you want the green bar to always stay high throughout the timeline. The red bar also means stuttering, So another way to measure progress is to eliminate these red bars. ” Thanks Kayce Basques!

Using Transform

.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
}
.app-menu-open .app-menu {
  -webkit-transform: none;
  transform: none;
  transition: transform 300ms linear;
}

transform

Attributes affect the synthesis step, not the layout. Here we inform the browser that our layers are stable before the animation starts, so there are fewer obstacles when rendering the animation.

This is how the timeline reflects:

The results start to get better, the frame rate seems to be stable, so the animation runs smoother.

Run animation in GPU

Then, let's take it to the next level. To really make it run smoothly, we will use the GPU to render the animation.

<div>
  <div></div>
  <div>
    <div></div>
  </div>
</div>

Although some browsers still need translateZ() or translate3d() as fallback, the will-change attribute is the future. This property promotes the element to another layer, so the browser does not have to consider layout rendering or drawing.

See how smooth it is? The timeline confirms this:

The frame rate of the animation is more constant and the animation rendering speed is faster. But there is still a long frame running at the beginning: there is a bit of a bottleneck at the beginning. Remember the HTML structure we created at the beginning? Let's see how we control app-menudiv:

in JavaScript

.app-menu {
  left: -300px;
  transition: left 300ms linear;
}

.app-menu-open .app-menu {
  left: 0px;
  transition: left 300ms linear;
}

Ahhh! We're causing a problem here by adding classes to layoutdiv. This forces the browser to regenerate our style tree – which affects rendering performance.

Solution of buttery smooth at 60 frames per second

What if we create the menu outside the viewport area? Putting the menu in the quarantine area will ensure that we only affect the elements we want to animation. Therefore, we recommend using the following HTML structure:

.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
}
.app-menu-open .app-menu {
  -webkit-transform: none;
  transform: none;
  transition: transform 300ms linear;
}

Now we have to control the status of the menu in a slightly different way. We will use the transitionend function in JavaScript to manipulate animations in classes that are deleted at the end of the animation.

.app-menu {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform 300ms linear;
  will-change: transform;
}

Let's put everything together and check the results. Here is a complete CSS3 enabled example, everything is in the right place:

function toggleClassMenu() {
  var layout = document.querySelector(".layout");
  if(!layout.classList.contains("app-menu-open")) {
    layout.classList.add("app-menu-open");
  } else {
    layout.classList.remove("app-menu-open");
  }
}
var oppMenu = document.querySelector(".menu-icon");
oppMenu.addEventListener("click", toggleClassMenu, false);

What does the timeline show us?

It's all green strips, baby. Want to see a practical example? Click here. (The actual link should be inserted here)

(The FAQ section about mobile animation should be added here, the content is consistent with the FAQs section in the original document)

The above is the detailed content of Achieve 60 FPS Mobile Animations with CSS3. For more information, please follow other related articles on the PHP Chinese website!