If the user leaves the page completely (e.g. navigates to a whole new page or closes that tab) then the animations shouldn't keep running. If they somehow do keep being updated, it's because of a browser bug and you shouldn't worry about it anyway.
However, CSS3 animations for hidden elements (display: none;
, for instance) still get evaluated, since they are keyframe-based, and there might be a keyframe sometime in the future that would cause the element to become visible again.
Imagine wanting to animate a box by first hiding it, then showing it again and making it flash. If CSS transitions would suddenly become disabled when the box is hidden, the animation would stop and the box would never appear again. And that's not what you want.
Note: profiling your web page can be done e.g. in Chrome using the Developer Tools (F12 -> Profiles). I haven't used it to profile CSS3 animations though, so I'm not sure if it can be done. You can however just take a look at Chrome's very own task manager (Shift-ESC
) and see whether your website is using up a considerable amount of CPU. If that's true, then it's a sign that there might be too many animations on that page.