javascript - 纯 JavaScript 类似 CSS3 的动画

Question

如何使用简单的 JavaScript，无需切换类和 ID，无需 jQuery 和 jQuery 插件，重新制作 CSS3 动画，但是只能使用 JavaScript？在 CSS3 中，使用 @keyframes 非常简单，但是如何使用 JavaScript 做到这一点呢？代码是什么？

如何创建动画？

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;
 }

这会在 0.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';
    }       
}