The priority of css3 is used for the id and class in the animation.

The priority of css3 is used for the id and class in the animation.

Today, I am working on a project. I use zepto to add a class to the element. The class has the transform effect. At the beginning, the element style was written using the id selector. However, after adding the class, the animation effect was lost, as a result, I tried it with simple code and found it was a very simple problem ......

The reason for animation compaction is:The css priority in the id selector must be higher than the class selector priority.The newly added class cannot overwrite the original style, which leads to an animation crash.

Simple code test:

<! DOCTYPE html>