CSS3 animation, translate to position

Question

I have a div that I click on to drag it. Once it's on an area, it animates to its position via:

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

I can also get it to animate with:

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

The difference being; with jQuery it animates to 200px from the left of the document. With CSS3, it animates 200px from where you drop it (which is bad)

Is there a way to make CSS3 animate from the top left of the document, as jQuery does? I've tried changing transform-origin and a few other settings with no luck.

Answer 1

I'm not an expert in CSS3 transforms, but I think translate is relative to the element's original position.

One way I can see to achieve what you want with CSS would be to position the element absolutely, and use a CSS3 transition to change its left and top properties.

Here is a Fiddle: 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');
    });
});

The purpose of the JS is to add the move class to the element when it is clicked.