I'm trying to move this square to right 100px after clicking on it with js, I've set the transition to 1s, but it doesn't work
window.onload = function(){
var square = document.querySelector(".square");
square.onclick = function(){
square.style.right = "100px";
};
};.square {
position: absolute;
background-color: red;
width: 500px;
height: 500px;
transition: 1s;
}<div class="square">
</div> CSS won't animate things from auto to px.
Since right is not defined, it's defaulting to auto.
window.onload = function(){
var square = document.querySelector(".square");
square.onclick = function(){
square.style.right = "100px";
};
};.square {
position: absolute;
background-color: red;
width: 500px;
height: 500px;
right: 0;
transition: 1s;
}<div class="square">
</div>However, if you want to animate it without setting right at the beginning, you can also use translate.
window.onload = function(){
var square = document.querySelector(".square");
square.onclick = function(){
square.style.transform = "translateX(100px)";
};
};.square {
position: absolute;
background-color: red;
width: 500px;
height: 500px;
transition: 1s;
}<div class="square">
</div>