I have this code:
var targetLocationX = 75;
var targetLocationY = 75;
var peice = $(".selected");
peice.css({
"left": targetLocationX,
"top": targetLocationY
});img,
canvas {
width: 75px;
height: 75px;
position: absolute;
-webkit-user-drag: none;
}
img {
left: 30px;
top: 30px;
background-color: rgba(0, 0, 0, 0);
transition: left 0.2s, top 0.2s;
}<img id="b-pawn-1" class="pawn bp selected" src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>The issue is that as I have specified the transition property in CSS, the image should animate to the target location, but unfortunately, this isn't the case. I have tried animating the image using transform, which works, but for my case, I prefer left and top.
Why is left not animating here?