纯JavaScript类似CSS3的动画

Question

如果没有jQuery和jQuery插件,我可以使用简单的JavaScript,无需切换类和ID ,重新制作CSS3动画,但只能使用JavaScript？在CSS3中使用它是如此简单,但如何使用JavaScript？代码是什么？@keyframes

我该如何制作动画？

var start = document.getElementById("start");
start.style.animation = ... // I don't know what to do
start.style.animationname = ... //Or something like this?

我还是JavaScript新手.

UPD

我将尝试简单地描述,我需要什么:我需要一个div,当我点击它时,它必须向左移动+ 5px.但我读到,DOM动画并不是那么好,所以我问起在JavaScript中使用类似CSS3的动画.

Answer 1

为什么不这样做:

var start = document.getElementById("start");

start.style.left = + 10 + 'px';

CSS:

 #start{
     -webkit-transition: all .5s ease-in-out;
     -moz-transition: all .5s ease-in-out;
     -o-transition: all .5s ease-in-out;
     transition: all .5s ease-in-out;
 }

这将使您的元素在.5秒内向右移动10px.

编辑您的编辑:

要做到这一点,你可以这样做:

function move_left(current_pos){
    var element = document.getElementById("start");
    var start_left = element.style.left;
    var end_pos = parseInt(start_left, 10) + 5; 

    if(current_pos != end_pos){
        element.style.left = element.style.left + 1 + 'px';
        current_pos = parseInt(element.style.left, 10);
        return move_left(current_pos);
    }else{
        return 'finished';
    }       
}