CSS3のアニメーションを色々検証してみる

そんなわけで、CSS3のアニメーションを実装するために色々と検証してみる。
前回は

//パターン１
#box1 {
    -webkit-transition-propaty: all;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease-in-out; 
}

といった感じに紹介しましたが、この書き方よりも

//パターン２
#box1 {
    -webkit-transition: all 1s ease-in-out;
}

という書き方にしておいた方がよさそうです。
というのも、JavaScriptで-webkit-transitionの値を書き換えようとする際にちゃんと動作したのは
-webkit-transition-timing-function
しかちゃんと動作せず、
-webkit-transition-propaty
-webkit-transition-duration
を値を書き換えても無視されます。
たとえば

document.getElementById("box1").style.webkitTransitiondPropaty = "none";
document.getElementById("box1").style.webkitTransitiondDuration = "5s";
//$("#box1").css({webkitTransitiondDuration:"5s"});

とかは反応しませんでした。

document.getElementById("box1").style.webkitTransition = "all 5s ease-in";
//$("#box1").css({webkitTransition:"all 5s ease-in"});

　こんな風にしないとだめです。もしpropatyやdurationだけ変えたい場合は

document.getElementById("box1").style.webkitTransition = "none";
document.getElementById("box1").style.webkitTransition = "5s";
//$("#box1").css({webkitTransition:"none"});

　とすればいいようです。

document.getElementById("box1").style.webkitTransitionTimingFunction = "ease-out";

　だけはしっかり動作します。
　CSS自体はパターン１だろうがパターン２だろうがどっちでもちゃんと動作しますが、JavaScriptでは基本的に全部指定するのがベターっぽいです。

　CSS3は謎が多いです。