These are my personal problems in CSS3 animation, all of which are my personal experience and solutions. I don’t believe there will be repeated articles on the Internet. You can click on codePlay for each TAB to get a feel for it.

Common error: Animation

First, let’s review the properties of animation:

The property name The default role
animation-name none The name of the keyframe
animation-duration 0s Total running time
animation-timing-function ease You can’t always run at a constant speed
animation-delay 0s Delay time
animation-iteration-count 1 The number of repetitions, or it could be infinite
animation-direction normal Animation execution direction, can be forward or reverse
animation-fill-mode none The default style is used before the animation starts and the default style is returned at the end of the animation.
animation-play-state running The state of the animation, notice that if the animation is finished at this time, the state is also running, because this running does not mean that the animation is running, but a state, whether it is forcibly suspended.

Common mistake 1: animation is done disappear! Feed! I didn’t make you disappear.code play~

This should be the basic problem in animation, so it is put in the first place. The solution to this problem is that the animation-fill-mode property is not set or incorrectly set. This property is technically a continuation of the animation, where 0~100% of the keyframe runs out and before it starts. Simply put, after the animation ends or before it starts, whether the current state of the element remains the state of the last frame of the animation or uses the style of the first frame before it starts. This property defaults to an unreserved state, which means it is in the original state before it starts, then transitions to the style, and immediately switches to the original state after it finishes, as if the animation never existed. Forwards refers to the forwards and backwards state after animations are finished, forwards refers to the forwards and backwards state during animations delay. Both is very simple, including the state after the end and the state before the beginning. Of course, people prefer both, so you don’t have to worry about before or after.

Common mistake 2: How can not stop, want to control the animation dynamics.code play~

Here we can use animation-play-state to control whether the animation continues or not. Let’s make a point. Continuing here doesn’t involve starting over.

Can I control the animation restart by controlling the animation-direction value? Let’s say I do a reverse animation and then I start again. Emmm, great idea, but harsh reality. The animation’s time is very intelligent. For example, if I change the animation in the process of animation, the animation will obtain the state according to the state in the opposite direction of the current time, and then execute from which point, that is to say, change the direction in the process of animation, and finally execute the animation at the original time. That is, unless you cancel the animation, the animation time is fixed (with a few minor errors of course). So it would be naive to use direction to animate an animation.

In that case, can I move back, like an element, I want it to go left to right and right to left again? Animation-direction can be set to alternate, which controls the animation range between odd and even times, but! Animation number >1, otherwise where come odd even ah ~

There is a blog post on CSS Triks that explains how to Restart CSS Animation in detail

Common mistakes: Transition

Let’s review the properties of transition.

The transition properties The default value role
transition-delay 0 delay
transition-duration 0 Conversion speed
transition-property all The change property monitors all changes by default. If only one value is needed, such as transform, only the transform is listened for.
transition-timing-function ease Time function

Am I the only one who thinks Transition is a pit? It feels more difficult to control than animation.

Common mistake 3: be I dazzled, how direct end, as if never existed.play code

In one case, I changed transform the first time the page rendered, thinking that if I changed TranForm, the transition would work. But this transition works by comparing the current render state to the last render state. So changing something like this, changing the Transform before the first rendering, and then not moving, can be solved with requestAnimationFrame, This method is used as the last step before rendering, before paint, and then changing the layout, and finally transition feels the call, recognizes the difference, and it works.

FailTransition.style.transform="translateX(100px)"
requestAnimationFrame(()=>{
  SuccessTransition.style.transform="translateX(100px)"
})
Copy the code

The procedure goes something like this:

Recalculate Style>Layout>requestAnimationFrame>Recalculate Style>Layout>Update Layer Tree>Paint>Composite Layers

There’s another case where we want this element to go to the right and then to the left, and from last time we could write it that way, but it doesn’t work. Why is that? RequestAnimationFrame overwrites the style before it reaches paint, and then compares the last style to the last render style.

change.addEventListener("click",()=>{
    ChangeFrequency.style.transform="translateX(10000px)"
    requestAnimationFrame(()=>{
        ChangeFrequency.style.transform="translateX(50px)"})})Copy the code

To solve this problem we can double requestAnimationFrame. So instead of moving to the right for 1s and then to the left for 1s, we’re going to flash the end of our animation for 1s.

change.addEventListener("click",()=>{
    ChangeFrequency.style.transform="translateX(10000px)"
    requestAnimationFrame(()=>{
        requestAnimationFrame(()=>{
            ChangeFrequency.style.transform="translateX(50px)"})})})Copy the code

As for how to implement concatenation, my first choice is animation, and my second choice is to listen for the transitionEnd event to execute subsequent animations after an animation has finished.

function moveBack(){
  ChangeFrequencyFix.style.transform="translateX(50px)"
  ChangeFrequencyFix.removeEventListener("transitionend",moveBack)
}
ChangeFrequencyFix.addEventListener("transitionend",moveBack)

Copy the code

Common mistake 4: How to return a responsibility! From a strange place! This is a little bug.code play

Ideal is from the top left to the bottom right, and then zoom in. After the animation ends, start from the origin again, zoom in from the top to the bottom, and then directly slide in parallel from the bottom right to the last position. This small bug can be said to be fatal. Because the nature of Transition is to preserve the last frame of the last animation and then transition to a new state, if you don’t want to reset a state, remember to turn off transition, otherwise you will have continuous animation.

function goTrravel(){
  correctToGo.removeEventListener("transitionend",goTrravel)
  correctToGo.style.transition="none"
  correctToGo.classList.remove("active")
  requestAnimationFrame(()=>{ 
    requestAnimationFrame(()=>{ 
      correctToGo.classList.add("pop")
      correctToGo.style.transition="transform 2s,opacity 2s"
    })
  })
}
correctToGo.addEventListener("transitionend",goTrravel)
Copy the code

Because transition is monitored in real time, if the transform state is removed, it will return to the default state. So if you want to get rid of it and go back to initialization or something you have to reset the transition.

Common mistake 5: feed feed, you how still in this layer below, I give you z-index:1000, you come out quickly. Animation lift layercode play

There are two concepts that we need to come up with here: CSS Context Stack, MDN reference url

In general, if you want the hierarchy to be high, use the z-index setting. Even the hierarchy of parent node A is lower than that of parent node B. However, if there is no promotion layer, the child nodes of parent node A in the same layer can be higher than that of parent node B. However, if an ascending layer is generated, children in parent node A can be higher than parent node B unless the entire parent node A is higher than parent node B.

An example of this is shown in the figure below, where the yellow child nodes cannot break through the red node because they are already in different layers. Z-index only works on the current layer and has no cross-layer processing capability.

Will-change works the same as translateZ(0).

If you want to speed up GPU rendering, you can use a hack like translateZ(0) or a new CSS attribute will-change. What is the principle of these two attributes?

They are essentially the concept of elevating layers, removing elements that may change later from the current layer and preventing composition, so that this section can be modified without affecting the layout of the entire page, thus preventing reflow.

Does translateZ(0) work the same as will-change? No!

Although they are both promotion layers, will-change is cached, meaning that the content of change is cached, and only the repeat animation after the first animation back to paint is not drawn, but translateZ(0) is redrawn every time. Will-change is great for repetitive animations. But! Don’t abuse it. Will-change is cached and therefore takes up a lot of memory. Use with caution.

Reference links:

  • Youtu. be/cCOL7MC4Pl0, JS conf Evenloop/youtu.be/cCOL7MC4Pl0, JS conf evenloop/youtu.be/cCOL7MC4Pl0, JS conf
  • Developer.mozilla.org/zh-CN/docs/… , MDN is a necessary site to study CSS.
  • www.w3.org/TR/2016/WD-… , if you want to further study the layer, you can refer to the CSS specification, you can have a deeper feeling. But the CSS specification is for you to learn CSS in depth, not to teach you how to use it.

Note:

Original statement! All are the author of a word a word out, code is the author of a code out.

Welcome to reprint, indicate the source.