Although CSS animations are hardware accelerated in all major browsers they can still lack performance in some situations.
There are four animations that browsers can handle really well and cheap - scale, position, rotation and opacity. All other animations that change the geometry of the page (animations that cause painting) are considered expensive. Let's take width for example. Animating an element's width will change its geometry and may cause other elements to move or change too. Those process is called layout. Whenever a layout is triggered, the page is painted (filling out the pixels for each element). The paining is really expensive process!
As a rule of thumb, you should try to avoid animations that trigger layout and paint whenever you can and stick to animating transforms and opacity. For a list of CSS properties that trigger layout or paint when changed you should check this list or CSS Triggers.