CSSanimation，用JS修改duration无效

http://jsbin.com/qafahamugu/1/edit?css,js,output

.animated {
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function:ease-in-out;
}
.animated2{
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function:ease-in-out;
}
@-webkit-keyframes 'blink' {
0% { background: rgba(255,0,0,0.5); }
50% { background: rgba(255,0,0,0); }
100% { background: rgba(255,0,0,0.5);}
}
.blinksth {
width: 100px;
height: 100px;
-webkit-animation-name: blink;
}
var $animated = $(".animated");
$(".change").on("click",function(){
$animated.css({
"webkitAnimationDuration":"10s"
});
});
$(".paused").on("click",function(){
$animated.css({
"webkitAnimationPlayState":"paused"
});
});
$(".running").on("click",function(){
$animated.css({
"webkitAnimationPlayState":"running"
});
});
$(".change-class").on("click",function(){
$(".blinksth").removeClass("animated").addClass("animated2");
});

尝试了直接修改时间和切换类名的办法，有什么正确的推荐做法吗