Как активировать анимацию CSS3 (webkit) с помощью javascript?

Я действительно застрял. Я хочу, чтобы созданная мной CSS-анимация (ниже) активировалась при нажатии на div. Я думал, что могу сделать это только с помощью javascript для создания события onClick. Однако я не знаю, как запустить / обновить анимацию, которая находится в моем файле css. Может ли кто-нибудь мне помочь?

Это анимация в моем файле css, которую я хочу запустить, щелкнув div.

@-webkit-keyframes colorchange {
 0% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
 33% {
   background-color: blue;
   opacity: 0.75;
   -webkit-transform: scale(1.1) rotate(-5deg);
 }
 67% {
   background-color: green;
   opacity: 0.5;
   -webkit-transform: scale(1.1) rotate(5deg);
 }
 100% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
}

Я даже попытался поместить CSS в тот же файл, что и javascript (index.html), и использовал следующий код, чтобы попытаться активировать его при нажатии, но безуспешно.

<script>
function colorchange( test )
{
test.style.webkitAnimationName = 'colorchange ';
}
</script>

Пожалуйста, помогите :)