CSS3动画,转换为位置

Question

我有一个div,我点击它来拖动它.一旦它出现在某个区域,它就会通过以下方式激活其位置:

$("#wheel1").animate({left: "200px", top: "100px"});

我也可以用它来制作动画:

@-webkit-keyframes wheel1 {
    0% {
    }
    100% {
        -webkit-transform: translate(200px, 100px);
    }
}

不同的是; 使用jQuery,它从文档左侧动画到200px.使用CSS3,它可以从放置它的地方动画200px(这很糟糕)

有没有办法从文档的左上角开始制作CSS3动画,就像jQuery一样？我试过改变变换原点和其他一些设置而没有运气.

Answer 1

我不是CSS3变换的专家,但我认为translate这与元素的原始位置有关.

一种方法我可以看到达到你想要用什么CSS将元素绝对定位,并使用CSS3 transition来改变它left和top属性.

这是一个小提琴:http://jsfiddle.net/nSa9s/2/

HTML:

<div class="box"></div>

CSS:

.box {
    position: absolute;
    background: #ff0000;
    left: 400px;
    top: 200px;
    width: 100px;
    height: 100px;
    -webkit-transition: all 1.0s linear;
    -moz-transition: all 1.0s linear;
    -o-transition: all 1.0s linear;
    -ms-transition: all 1.0s linear;    
    transition: all 1.0s linear;
}
.box.move {
    left: 200px;
    top: 100px;
}

jQuery的:

$(document).ready(function() {
    $('.box').on('click', function() {
        $(this).addClass('move');
    });
});

JS的目的是在move单击元素时将该类添加到元素中.