How to hardware accelerate a box-shadow animation in CSS?

Question

I am animating on a box-shadow with CSS. Using Instruments program, I discovered that this animation alone is taking 35% of the CPU on iOS Safari! The iPhone become hotter and hotter when I leave the page running. If I comment out the animation, CPU usage is back to normal. How can I hardware accelerate this animation to not strain the CPU?

jsFiddle: http://jsfiddle.net/tokyotech/TutLh/

@-webkit-keyframes pulseGlow {
    0% {
        box-shadow: none;
    }
    10% {
        box-shadow: 0 0 1.4em rgba(255,0,0,1),
            0 0 1em rgba(255,0,0,1) inset;
        border-color: rgba(255,0,0,0.5);
    }
}

#recordButton {
    display: block;
    width: 5em;
    height: 5em;
    background: salmon;
    border-radius: 50%;
    -webkit-animation: pulseGlow 1s ease-in-out 1s infinite;
}

Answer 1

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.