Анимация бесконечного вращения CSS

Я хочу повернуть значок загрузки с помощью CSS.

У меня есть значок и следующий код:

<style>
#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
</style>

<div id='test' class='rotating'></div>

Но это не работает. Как можно повернуть значок с помощью CSS?