How to start CSS animation when an object is visible?

Question

css

Hello. There is this structure:

<div>
    <img>
</div>

Help me understand: how to make the animation start only when it has the "display" property not set to "none"?

Answer 1

What same changes to it display?! At the same moment, add an animation class to it.

Answer 2

mynameismatthieu.com/WOW

Answer 3

As an option, check the style of the element using JS, and assign it a class with animation.

Answer 4

codepen.io/nurislamov/pen/qdEORY
you can do this