Unnecessary inheritance?

Question

css

The div has two blocks - left-block and right-block. When a block appears, there is an animation for two blocks. The problem is that in the right-block block there is another left-block block and for some reason it inherits the animation that occurs in a separate left-block block. Is it possible to make a left-block placed inside a right-block not inherit the animation that happens with a left-block not nested within a right-block?

Answer 1

Give the blocks to be animated special classes or id's where the animation is assigned.
On the plus side: less inheritance, cleaner code, and the ability to reuse animation when needed.
Or set the animation with hard inheritance, for example:

.parent > .left-block{...}
.parent > .right-block{...}

This method is better to use if you have a unique animation for these blocks and it will not be used anywhere else.