JavaScript не перемещает элемент

Question

Я пытаюсь создать окно с возможностью нажатия, чтобы отключить преобразование CSS.Я пытаюсь переписать CSS с помощью javascript, но, похоже, он не работает.Я бы хотел, чтобы они просто немного переместились влево и вниз после нажатия на <a>, где они были бы, если бы просто сфокусировались на <input>.

.bigbox {
border: 2px solid black;
border-radius:      20px;
background-color:   blue;
color:  white;
padding-left: 15px;
}
#closebigbox {
padding:    10px;
border: 2px solid black;
border-radius:      20px;
background-color:   blue;
color:  white;
font-size:  8px;
width:  25px;
text-align: left;
background-color:   silver;
}
.bigbox_submit{
padding:    3px;
border: 2px solid black;
border-radius:      20px;
background-color:   blue;
color:  white;
font-size:  12px;
width:  25px;
text-align: left;
background-color:   silver;
}

.bigbox{ 
 -moz-transition: all 0.5s ease-in-out; 
 } 
 .bigbox:focus { 
 background-color: #fc3; 
 -moz-transform: translate(125px,25px) scale(2); 
 }

---

<a href="javascript: document.getElementsByClassName('bigbox').style.position = 'relative'; document.getElementsByClassName('bigbox').style.left = '125px'; document.getElementsByClassName('bigbox').style.top = '25px';"  id="closebigbox" >Clear</a>

<form>
<input type="text"   class="bigbox" /><br/>
<input type="text"   class="bigbox" /><br/>
<input type="text"   class="bigbox" /><br/>
<a href="javascript:" class="bigbox_submit" >Submit</a>
</form>`

Answer 1

getElementsByClassName возвращает массив, поэтому вам нужно перебрать все элементы и затем применить стиль:

var _elements = document.getElementsByClassName('bigbox');
for( var i = 0; i < _elements.length; i ++){
    _elements[i].style.position = 'relative'
    _elements[i].style.left= '125px'
    _elements[i].style.top= '25px'
}

Answer 2

Попробуйте сделать что-то вроде этого

$('Foo').animate({right:2000px}).delay(3000).animate({left: '0px' });