webkit-animationのプロパティを書き換える

cssのwebkit-animationは，アニメーションのキーフレームを細かく指定できる，ループ指定が簡単等非常に便利ですが，duration等を途中で変更する方法で詰まってしまいなかなか解決策が見つからなかったのでメモ

要件

動いているwebkit-animationをjsから操作して途中で止めたい or duration等のプロパティを途中で変更したい．

解決策

webkitの処理を記載しているidやclassを書き換えても効果なし．
animationを止める場合は-webkit-animation-nameを空にする．
プロパティを変更したい場合は，duration等を書き換えた後，
-webkit-animation-nameを変更する．

/*anime.css*/

@-webkit-keyframes anime0{
    0%{-webkit-transform:rotate(-90deg)}
    100%{-webkit-transform:rotate(270deg)}
}

@-webkit-keyframes anime1{
    0%{-webkit-transform:rotate(-90deg)}
    100%{-webkit-transform:rotate(270deg)}
}

.anime-class{
    -webkit-animation:anime0 20s linear 0 infinite;
}

.anime-class2{
    -webkit-animation:anime0 10s linear 0 infinite;
}

function changeanimetionspeed() {
$(".anime-class").css("-webkit-animation-name", "");
$(".anime-class").css("-webkit-animation-duration", "10s");
$(".anime-class").css("-webkit-animation-name", "anime1");
}

この際，一度animationを止めずに連続的にプロパティを変更したい場合，-webkit-animation-nameを一度空にして同じ名前を登録しても効果はなく，別の名前を登録する必要がありました
(キーフレーム自体には変更が無くとも同じ内容で別名の-webkit-keyframesを用意し，切り替える必要があった)．

上の例では，changeanimetionspeedを呼ぶとキーフレームの挙動はそのままに，アニメーション1ループにかかる時間が20sから10sに変更されます(クラスをanime-class2に切り替えるのは効果なし)．

ただもっといい方法があると思うのですが．．．