Pure JavaScript CSS3-анимация, как

Как я могу с простым JavaScript, без переключения классов и идентификаторов, без JQuery и JQuery плагин, переделать CSS3 анимацию, но только с JavaScript? В CSS3 это так просто, используя @keyframes, но как это сделать с помощью JavaScript? Каким будет код?Pure JavaScript CSS3-анимация, как

Как создать анимацию?

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 не так хороша, поэтому я попросил об использовании CSS3-подобной анимации в JavaScript.

источник

2013-07-18 Anonymous

Посмотрите на учебник [как этот] (http://www.schillmania.com/content/projects/javascript-animation-1/). Они покажут вам, что вы можете делать такие вещи, как 'function doMove() {foo.style.left = (foo.style.left + 10) + 'px';} doMove();' для перемещения объекта влево 10 пикселей. Сообщения на SO должны быть связаны с конкретной проблемой, а не с широким вопросом, подобным этому. –

** Неясно, что вы просите **: * Просьба уточнить вашу конкретную проблему или ** добавить дополнительные сведения ** на ** выделить ** ** точно **, что вам нужно. * –

Почему бы просто не сделать это:

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

Это переместить элемент 10px вправо в .5 секунды.

Редактировать относительно вашего редактирования:

Чтобы сделать это вы можете сделать это:

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

источник

2013-07-18 17:12:47 Ryan

hanks, но это просто переместит его на 10 пикселей влево, но мне нужна анимация ... Теперь вы создадите красивый эффект ... –

@ АртурЛукин * ** Анимация *** - большое слово. Какую анимацию вы хотите? Что вы пытались достичь самостоятельно, используя JavaScript? –

@ АртурЛукин Это то, что «облегчение перехода» делает это оживление движения. См. [Здесь] (http://www.sitepoint.com/build-awesome-apps-with-css3-animations/#fbid=kjlSTz8LX-m) для получения дополнительной информации о том, что может сделать «переходы». – Ryan

анимировать вам необходимо определить начальное состояние, и целевой (или закончил) состояние и функция ослабления для контроля скорости изменения.

Вместо того, чтобы начинать с нуля, я предлагаю использовать существующее решение, там есть много кода, чтобы помочь вам в этом.

Отъезд: https://github.com/sole/tween.js

источник

2013-07-18 17:24:45 daniellmb

Спасибо, я попробую ... –

Pure JavaScript CSS3-анимация, как

ответ

Смежные вопросы