动画期间触发更新

Question

我使用以下CSS代码设置div（id =“ani”）的动画。

#ani {
        width: 100px;
        height: 100px;
        background: red;
        color:white;
        position :relative;
        animation: mymove 5s infinite;
    }
 @keyframes mymove {
    0%   {left: 0px;}
    25%  {left: 250px;}
    50%   {left:500px;}
    75%  {left: 250px}
    100% {left: 0px;}
}

我想知道是否有办法显示CSS'left'属性的瞬时值，因为它正在改变，即'left'的值应该一直显示在屏幕上。有没有办法绑定'左'值来说 任何文字字段？ AngularJS似乎不适用于样式表。

Answer 1

您可以使用 DEMO

之类的内容

$(function(){
    var div = $('#ani'),
        showLeft = $('#left');  

    setInterval(function () {
       showLeft.text(div.position().left)
     }, 10);
});