CSS

• -webkit-transition

-webkit-transition

• 2つ以上のプロパティを同時に指定する方法

element.style.webkitTransition = "-webkit-transform 10s ease-out, opacity 3s linear";
element.style.webkitTransform = "translate(100px,100px)";
element.style.opacity = 0;

• この書き方だと後から設定した方（opacity）だけしか有効にならない

element.style.webkitTransition = "-webkit-transform 10s ease-out";
element.style.webkitTransition = "opacity 3s linear";
element.style.webkitTransform = "translate(100px,100px)";
element.style.opacity = 0;

• 両方とも「10s」になってそうでなっていない（-webkit-transformの方は初期値のまま）

element.style.webkitTransition = "-webkit-transform, opacity 10s";
element.style.webkitTransform = "translate(100px,100px)";
element.style.opacity = 0;

• webkitTransitionの値を途中で変更しても影響しない

element.style.webkitTransition = "-webkit-transform 10s";
element.style.webkitTransform = "translate(100px,100px)";
/* しばらくしてから */
element.style.webkitTransition = "-webkit-transform 5s";
/* としても動きは変わらない */

• "initial"はすぐに影響する

element.style.webkitTransition = "-webkit-transform 10s, opacity 10s";
element.style.webkitTransform = "translate(100px,100px)";
element.style.opacity = 0;
/* しばらくしてから */
element.style.webkitTransition = "initial";
/* とするとすぐ(100,100)に移動して消える */

element.style.webkitTransition = "-webkit-transform 10s, opacity 10s";
element.style.webkitTransform = "translate(100px,100px)";
element.style.opacity = 0;
/* しばらくして */
element.style.webkitTransition = "-webkit-transform 3s";
/* とすると、opacityの方は"initial"になるのですぐに消えてしまう */

• 連続して書くと影響する

element.style.webkitTransition = "-webkit-transform 10s";
element.style.webkitTransform = "translate(100px,100px)";
element.style.webkitTransition = "-webkit-transform 2s";
/* この場合は「2s」が適用される。Transitionが動き始めてないから? */

• なので下のように書いて(100,100)から(200,200)にさせようとしてもうまくいかない

element.style.webkitTransition = "initial";
element.style.webkitTransform = "translate(100px,100px)";
element.style.webkitTransition = "-webkit-transform 10s";
element.style.webkitTransform = "translate(200px,200px)";

• 無理やり作ってみた

element.style.visibility = "hidden";
element.style.webkitTransition = "1ms"; //"initial"や"0s"だとイベントが発生しない
element.style.webkitTransform = "translate(100px,100px)";
element.addEventListener("webkitTransitionEnd",function(e)
{
    e.currentTarget.removeEventListener( "webkitTransitionEnd", arguments.callee, false );
    element.style.visibility = "visible";
    element.style.webkitTransition = "10s";
    element.style.webkitTransform = "translate(200px,200px)";
});

• こっちの方がシンプル

element.style.visibility = "hidden";
element.style.webkitTransform = "translate(100px,100px)";
setTimeout(function()
{
    element.style.visibility = "visible";
    element.style.webkitTransition = "10s";
    element.style.webkitTransform = "translate(200px,200px)";
},0);//0msでいいらしい