The short answer is that the browser decides on when to use hardware acceleration to render something; it's not something you can force on any particular class or style. You can however use certain css properties that are more likely to have a browser use hardware acceleration on it, for example -webkit-transform: translate3d
(even if you are performing a 2d transform on the page) and -webkit-transition
.
See this article for some notes as well as a list of hardware accelerated properties.
As for your particular animation problem, I'm not sure how you'd be able to get a repeating transition to occur without user interaction or using Javascript (alone or in addition to CSS). While you can have -webkit-transition: box-shadow
, I'm not sure how you would go about repeating your pulse animation since the transition will only run when the property value is changed.