結論、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>