Как сделать плавное передвижение кнопки на 200px в лево?

Question

[Old Odessa]

Здраствуйте!
У меня есть заголовок<h4 onmouseenter="bottonMove()">Форма </h4>
мне необходимо при наведении на него сдвинуть кнопку плавно на 200px в лево.
Я использую onmouseenter для запуска скрипта.

function bottonMove(){
    var element = document.getElementById('animateBotton');
    element.style.left = 200+'px';
}

Сама кнопка

<button type="button" class="btn btn-success palette animateBotton" onclick="rev(sentence, result)" id="animateBotton">Odwróć</button>

Ну и свойство CSS c помощью которое задает плавность действия:

#animateBotton {
    transition-property: left;
    transition-duration: 6s;
}

Вопрос почему не происходит плавное перемещение? Кнопка двигается но не 6 сек. Что именно я не понимаю.

Comments

[Ростислав Игнатенко]

Я не пойму, а зачем здесь JS? Почему нельзя сдвинуть кнопку на чистом css? :hover никто не отменял.

[Old Odessa]

Ростислав Игнатенко: потому, что измениться должно свойство кнопки, при наведении на заголовок.

[Ростислав Игнатенко]

Рофал Лафор: И? Задаете вашему заголовку допустим класс test и пишите в css
.test:hover animateBotton {left: 200px;}

[Old Odessa]

не работает, просто не работает

[Old Odessa]

они же не вложенные

[Ростислав Игнатенко]

Рофал Лафор: Используйте соответствующий знак
.test:hover ~ .animateBotton {left: 200px;}

[Ростислав Игнатенко]

Рофал Лафор: https://jsfiddle.net/7koL5wad/ вот вам на всякий случай пример.

[Old Odessa]

Ростислав Игнатенко: спасибо огромное, только вот если они не соседние и не вложенные, решать только скриптом?

Answer 1

[Владислав Старцев]

Решений несколько и все реализовывается на css

заготовка

<h4>Форма</h4>
<button>Кнопка</button>

первый вариант через позиционирование

button{
  position: relative; 
  left:0px; 
  transition: 2s;
 }
h4:hover + button{
  left:200px
 }

второй вариант через трансформацию

button{
  transition: 2s;
  transform: translateX(0px);
 }
h4:hover ~ button{
  transform: translateX(200px);
 }

Если нужно скриптом, то:
html

<h4 onmouseenter="bottonMove();">Форма </h4>
<button type="button" class="btn btn-success palette animateBotton" onclick="rev(sentence, result)" id="animateBotton">Кнопка</button>

css

.animateBotton{
	position:relative;
}

javascript

function bottonMove(){
		var start = Date.now();
    var element = document.getElementById('animateBotton');

		var timer = setInterval(function() {
        var timePassed = Date.now() - start;
        element.style.left = timePassed / 5 + 'px';
			
        if (timePassed > 1000) clearInterval(timer);
    }, 20);
}

Но лучше делать на html+css и избегать по возможности ситуации по включению js в верстку.