使用javascript激活WebKit CSS3动画

一旦定义了转换,无论如何更改元素的css值,它都将应用。因此,您只需使用javascript应用一个内联样式,元素就会产生动画。所以使用这样的CSS:

left: 100px;
top: 100px;
-webkit-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
-moz-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
-o-transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;
transition: top 300ms ease-in 100ms, left 200ms ease-in 50ms;

具有如下功能:

function clickme() {
    var el = document.getElementById('mydiv');
    var left =  300;
    var top =  200;
    el.setAttribute("style","left: " + left + "px; top: " + top + "px;");
}

当你调用函数时,你会看到动画。你可以从你喜欢的地方得到左上角的值。 I've done a full example .

另一个选择是使用 jQuery Transit 要将绝对位置的DIV向左或向右移动:

Javascript:

$("#btnMoveRight").click( function () {
    $('#element').transition({ left: '+=50px' });
});

$("#btnMoveLeft").click( function () {
    $('#element').transition({ left: '-=50px' });
});

JS Fiddle Demo

它在移动设备上工作良好,并为您处理CSS3/浏览器兼容性。