CSS3のアニメーション機能のTransitionとAnimationで、アニメーション中の値は取得できるのか (Kanasansoft Web Lab.)

結論、getComputedStyleを使えば取得できる。
ただし、今のところはWebKit(SafariかChrome)の実装しかないため、他のブラウザではどうなるのか不明。
もしかしたら、仕様に明記されているかもしれないけど、そこまで調べていない。

以下、デモと実コード。

デモ

<!DOCTYPE html>
<html>
<head>
<title>css3 transition animation</title>
<style>
#transition-box{
    position:fixed;
    border:1px red solid;
    top:30%;
    left:0px;
    -webkit-transition-property:left;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    transition-property:left;
    transition-duration:3s;
    transition-timing-function:linear;
}
#animation-box{
    position:fixed;
    border:1px red solid;
    top:60%;
    left:0px;
    -webkit-animation-name:left-0-300;
    -webkit-animation-duration:1s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-direction:normal;
    -webkit-animation-play-state:paused;
    -webkit-animation-timing-function:linear;
}
@-webkit-keyframes left-0-300{
    from{
        left:0px;
        animation-timing-function:ease-out;
    }
    to{
        left:300px;
        animation-timing-function:ease-out;
    }
}
@keyframes left-0-300{
    from{
        left:0px;
        animation-timing-function:ease-out;
    }
    to{
        left:300px;
        animation-timing-function:ease-out;
    }
}
@-webkit-keyframes left-300-0{
    from{
        left:300px;
        animation-timing-function:ease-out;
    }
    to{
        left:0px;
        animation-timing-function:ease-out;
    }
}
@keyframes left-300-0{
    from{
        left:300px;
        animation-timing-function:ease-out;
    }
    to{
        left:0px;
        animation-timing-function:ease-out;
    }
}
</style>
<script>
function initialize(){
    document.getElementById("transition-left-0px").addEventListener(
        "click",
        function(){
            document.getElementById("transition-box").style.left="0px";
        },
        false
    );
    document.getElementById("transition-left-300px").addEventListener(
        "click",
        function(){
            document.getElementById("transition-box").style.left="300px";
        },
        false
    );
    document.getElementById("animation-left-0px").addEventListener(
        "click",
        function(){
            document.getElementById("animation-box").style.WebkitAnimationName="left-300-0";
            document.getElementById("animation-box").style.WebkitAnimationPlayState="running";
            document.getElementById("animation-box").style.animationName="left-300-0";
            document.getElementById("animation-box").style.animationPlayState="running";
        },
        false
    );
    document.getElementById("animation-left-300px").addEventListener(
        "click",
        function(){
            document.getElementById("animation-box").style.WebkitAnimationName="left-0-300";
            document.getElementById("animation-box").style.WebkitAnimationPlayState="running";
            document.getElementById("animation-box").style.animationName="left-0-300";
            document.getElementById("animation-box").style.animationPlayState="running";
        },
        false
    );
    setInterval(
        function(){
            var transitionBox=document.getElementById("transition-box");
            document.getElementById("transition-display").textContent=
                    transitionBox.style.left+
                    "/"+
                    getComputedStyle(transitionBox, "").left;
            var animationBox=document.getElementById("animation-box");
            document.getElementById("animation-display").textContent=
                    animationBox.style.left+
                    "/"+
                    getComputedStyle(animationBox, "").left;
        },
        100
    );
}
window.addEventListener("load",initialize,false);
</script>
</head>
<body>

<div>
<span>transition</span>
<input type="button" id="transition-left-0px"   value="left:0px"   />
<input type="button" id="transition-left-300px" value="left:300px" />
<span id="transition-display"></span>
</div>

<div>
<span>animation</span>
<input type="button" id="animation-left-0px"   value="left:0px"   />
<input type="button" id="animation-left-300px" value="left:300px" />
<span id="animation-display"></span>
</div>

<div id="transition-box">transition</div>

<div id="animation-box">animation</div>

</body>
</html>

コメント (2)

www.hatena.ne.jp/piro_or

CSS Transitionsについては、アニメーション中にcomputed valueを取得した場合はその瞬間のスタイルに基づく値になると仕様にあります。
http://www.w3.org/TR/css3-transitions/#transitions-
ちなみにFirefox 4で-moz-transitionを使った場合もそのような挙動でした。

CSS Animationsの仕様にも同様の記述があります。
http://www.w3.org/TR/css3-animations/#animation-behavior-

投稿者: www.hatena.ne.jp/piro_or | 2011年03月11日 01:49

日時: 2011年03月11日 01:49

Kanasansoft

おー、ありがとうございます!

投稿者: Kanasansoft | 2011年03月31日 21:49

日時: 2011年03月31日 21:49

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

名前:

メールアドレス:

URL:

この情報を登録しますか?

コメント:

Kanasansoft Web Lab.