Are keyframe animations also rendered when not visible and do they consume resources?

I use a lot of CSS animations on my website but performance is not as good as it should be. Therefore I thougt maybe an infinite @keyframe animation which is only visible at sometimes slows the site down.

I hide it with opacity: 0 for fadeIn animation and after that I set display to none but I am not sure if the animation is rendered nevertheless and consumes resources.

An answer would be highly appreciated.