■

JavaScriptの挙動

■以下の2つは挙動が違う
→「style.visibility」が別オブジェクトになってるから？

・その1

var doc = document;
var hoge = doc.getElementById("HOGE");
hoge.style.visibility = "visible";

・その2（.style.visibilityごと変数へ格納）

var doc = document;
var hoge_visibility = doc.getElementById("HOGE").style.visibility;
hoge_visibility = "visible";

CSS3のアニメーションとvisibilityの関係

たとえばHOGEのIDにHOGE-Animというアニメーションがついているとする。

@-webkit-keyframes HOGE-Anim {
    0% {
        -webkit-transform: translate3d(37px, 132px, 0px) scale3d(0.5, 0.5, 1);
        -webkit-animation-timing-function: ease;
    }

    100% {
        -webkit-transform: translate3d(37px, 132px, 0px) scale3d(0.55, 0.55, 1);
        -webkit-animation-timing-function: ease-in;
    }
}

#HOGE {
    -webkit-animation-name: HOGE-Anim;
    -webkit-animation-duration: 0.55s;
    -webkit-animation-delay: 0s;
    -webkit-animation-fill-mode: both;
}

このようにHOGEをいったん非表示（hidden）にしておいて

var doc = document;
var hoge = doc.getElementById("HOGE");
hoge.style.visibility = "hidden";

あとから、表示（visible）にするとvisibleにした瞬間にアニメーションが開始されます。

var doc = document;
var hoge = doc.getElementById("HOGE");
hoge.style.visibility = "visible";

つまり、hiddenになっている最中の時間に見えないけど再生されていない！