This is a great question! Most people think that CSS animations are faster and they can get away with using anything they want which is not the case.
The answer to your question is quite simple, The effects that require the browser to take fewer steps behind the scene to change the visual look of the element are more efficient.
As @Kleo mentioned, browsers are most efficient in animating opacity and transforms like scale, rotation and translate and it is great cause you can pull off most of the animations using a combinations of these.
An intelligent use of the properties gets you the best results, take this case for en example: if you are modifying the top to move an element on hover, it would be quite heavy as it changes the Layout, Paint and Composite of the element. instead, it can be replaced by transform: translate( ) property which just affects Composite and gets you the same result.
Checking csstriggers.com is a great way of knowing how resource heavy the property is