问题描述

Javascript获取有CSS动画的标签的属性值

//CSS中的动画：
@keyframes move{
0% {left:0px;}
100% {left:100px;}
}
//CSS样式：
.move1{
width:100px;
height:100px;
animation:move 1000ms;
-webkit-animation:move 1000ms
}
//div标签：
div id="1" class="move1"

---

或者
.move2{
width:100px;
height:100px;
transform:translate(100px,0px); /*x轴移动100px，y轴0px*/
-webkit-transform:translate(100px,0px);
transition: transfrom 1s;
-webkit-transition: -webkit-transform 1s;
}
//div标签：
div id="1" class="move2"

---

请问我该如何在Javascript中获取div标签在动画移动中的left属性？

直接documen.getElementById("1").style.left不行

webkit内核不支持currentStyle，getComputedStyle还没有试

CSS中的动画是怎么样的一个原理呢？

还请各位提供解决问题的办法或者思路

---

ps:我是想做一个网页上的小游戏，类似于节奏大师那种，就是一个一个方块移动到底部时按下对应的按钮完成得分，现在就是不知道怎么解决 如何知道方块到达底部 的问题

解决方案

documen.getElementById("1").style.left获取的是dom对象中css值，级联样式要用window.getComputedStyle（标准浏览器）或者currentStyle（IE低版本）
Javascript获取级联样式表中定义的CSS值