движение объектов к центру

[nub]

помогите нужно плавное перемещение test к p или просто в центр по onclick или при старте читал http://learn.javascript.ru/animation-0 не разобрался желательно просто объяснить как это сделать

var fon = document.createElement('div');
fon.style.width = '100%';
fon.style.height = '100%';
fon.style.position = 'absolute';
fon.style.backgroundImage = "url(trava.jpg)";
document.body.appendChild(fon);
function tests()
{
var test = document.createElement('div');
test.style.zIndex = 10;
test.style.width = '30px';
test.style.height = '30px';
test.style.backgroundImage = "url('z2.gif')";
test.style.position = 'absolute';
y = Math.random()*600;
x = Math.random()*1300;
test.style.top = y+'px';
test.style.left = x+'px'; 
test.onclick = function(event) {event.target.style.display='none';}
document.body.appendChild(test);}
setInterval(tests, 2000);
var p = document.createElement('div');
p.style.width = '100px';
p.style.height = '79px';
p.style.backgroundImage = "url('p.gif')";
p.style.position = 'absolute';
p.style.top = '50%';
p.style.left = '45%'; 
document.body.appendChild(p);

[ixth]

Ух ты! Игрушка! )

В общем, с анимацией все действительно не так просто: нужно сделать отдельный таймер и очередь, в которую будем добавлять «прибитые» test'ы. Но мы пойдем другим путем и используем CSS и CSS3, как завещает нам тов. subzey:

Я немного переписал код и выложил его на codepen: http://codepen.io/ixth/pen/IAlve

var background = document.createElement('div');
background.className = 'background';
document.body.appendChild(background);

var blackHole = document.createElement('div');
blackHole.className = 'blackHole';
document.body.appendChild(blackHole);

function makeEnemy(x, y) {
    var enemy = document.createElement('div');
    enemy.className = 'enemy';
    enemy.style.top = y + '%';
    enemy.style.left = x + '%'; 
    enemy.onclick = function (event) {
        enemy.style.left = '50%';
        enemy.style.top = '50%';
        enemy.style.opacity = '0';
    };
    return enemy;
}

setInterval(function () {
    var y = Math.random() * 100;
    var x = Math.random() * 100;
    var enemy = makeEnemy(x, y);
    document.body.appendChild(enemy);
}, 2000);

.background {
    width: 100%; height: 100%;
    position: absolute;
    background:#222;
}

.enemy {
    position: absolute;
    width: 30px; height: 30px;
    margin:-15px;
    background:#b00;
    z-index: 10;
    border-radius:50%;
    -webkit-transition: left 1s ease, top 1s ease, opacity 1s ease;
    -opera-transition: left 1s ease, top 1s ease, opacity 1s ease;
    -moz-transition: left 1s ease, top 1s ease, opacity 1s ease;
    transition: left 1s ease, top 1s ease, opacity 1s ease;
}

.blackHole {
    position: absolute;
    left: 50%; top: 50%;
    width: 100px; height: 100px;
    margin:-50px;
    background:#000;
    border-radius:50%;
}

[nub]

ixth,
спасибо большое

[nub]

ixth,
но нужно без css

[nub]

сделал по своему вдруг кому пригодится

var fon  = document.createElement('div');
fon.style.width = '100%';
fon.style.height = '100%';
fon.style.position = 'absolute';
fon.style.backgroundImage = "url(trava.jpg)";
document.body.appendChild(fon);
var p = document.createElement('div');
p.style.width = '100px';
p.style.zIndex=1000;
p.style.height = '79px';
p.style.backgroundImage = "url('p2.gif')";
p.style.position = 'absolute';
p.style.top = '50%';
p.style.left = '45%';
document.body.appendChild(p);
function povtor(){
var bunny  = document.createElement('div');
bunny.style.width = '30px';
bunny.style.height = '30px';
bunny.style.backgroundImage = "url('z1.gif')";
bunny.style.position = 'absolute';
y = Math.random()*600;
x = Math.random()*1300;
bunny.style.top = y+'px';
bunny.style.left = x+'px';
bunny.onclick = function move(event) {
    var left = 0;

    function frame() {
        left++;
        bunny.style.left = left + 'px'

        if (left == 683) {
            clearInterval(timer1);
        }
    }

    var timer1 = setInterval(frame, 10)
    var top = 0;
    function frame2() {
        top++;
        bunny.style.top = top + 'px'

        if (top == 384) {
            clearInterval(timer2);
        }
    }
    var timer2 = setInterval(frame2, 10)
}
document.body.appendChild(bunny);
}
setInterval(povtor,2000)