javascript - jQueryを使用して別のdivがクリックされたときの無限CSS回転アニメーションの「イージングアウト」

Question

jquery を使用して、別の div をクリックすると、絶えず回転する div (CSS アニメーションを使用) をゆっくりとスムーズに停止させようとしています。

「animation-timing-function」プロパティを「linear」から「ease-out」に変更しようとしましたが、ゆっくりと停止するのではなく、突然停止します。

HTML

<div id=click>Click me</div>
<div id=spinner></div>

jQuery

$(function () {
$("#click").click(

function () {
    document.getElementById("spinner").style['-moz-animation-iteration-count'] = '1';
    document.getElementById("spinner").style['-moz-animation-timing-function'] = 'ease-out';
    document.getElementById("spinner").style['-webkit-animation-iteration-count'] = '1';
    document.getElementById("spinner").style['-webkit-animation-timing-function'] = 'ease-out';
    document.getElementById("spinner").style['animation-iteration-count'] = '1';
    document.getElementById("spinner").style['animation-timing-function'] = 'ease-out';

});
});

CSS

#spinner {
width:50px;
height:50px;
margin:20px;
background-color:red;

animation:spin-constant 5s;
-webkit-animation-name: spin-constant;
-webkit-animation-duration: 1200ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin-constant;
-moz-animation-duration: 1200ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: spin-constant;
animation-duration: 1200ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-moz-keyframes spin-constant {
from {
    -moz-transform: rotate(0deg);
}
to {
    -moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin-constant {
from {
    -webkit-transform: rotate(0deg);
}
to {
    -webkit-transform: rotate(360deg);
}
}
@keyframes spin-constant {
from {
    transform:rotate(0deg);
}
to {
    transform:rotate(36 0deg);
}
}

これが基本概念のフィドルです。 http://jsfiddle.net/jN5vw/1/