Изюминка анимации Javascript

Question

Когда мы выполняем этот код, в левом верхнем углу большого ящика появляется маленький прямоугольник в начале, а в конце - в нижнем правом углу большого ящика, и я хочу, чтобы диагональная линия отображалась изверхний левый угол к нижнему правому углу, так как это путь, пройденный маленькой коробкой (или я могу сказать, что хочу выделить путь, пройденный маленькой коробкой).Может ли кто-нибудь помочь мне с этим?

function slider()
{
    var t=setInterval(display,3);
    var pos=0;
    var x=document.getElementById("a1");
    function display()
    {
        if(pos==350)
            clearInterval(t);
        else
        {
            pos++; 
            x.style.top=pos+'px';
            x.style.left=pos+'px';
        }
    }
}

h2{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, 
    sans-serif;
    text-align: center;
    font-size: 50px; 
    color: rgb(100, 158, 13);
    background-color: bisque;
    border: 5px red groove;
}

body{
    background-color: cornflowerblue;
}

.container{
    background: black;
    height: 400px;
    width: 400px;
    position: relative;  
}

.box{
    background: whitesmoke;
    height: 50px;
    width: 50px;
    position: absolute;
 }

<h2>This is my first animation code</h2>
<center>
<div class="container">
    <div id="a1" class="box">
    </div>
</div>
<p>
    <button type="button" onclick="slider()">click here</button>
</p> 
</center>

Answer 1

CSS на самом деле не для этого, но ...

... Вы можете подделать этот эффект, используя другой элемент:

function slider() {
  var t = setInterval(display, 3);
  var pos = 0;
  var a1 = document.getElementById("a1");
  var path = document.getElementById("path");

  function display() {
    if (pos == 350)
      clearInterval(t);
    else {
      pos++;
      a1.style.top = pos + 'px';
      a1.style.left = pos + 'px';
      path.style.height = pos + 'px';
      path.style.width = pos + 'px';
    }
  }
}

body {
  background-color: cornflowerblue;
}

.container {
  background: black;
  height: 400px;
  width: 400px;
  position: relative;
}

.box {
  position: absolute;
  background: whitesmoke;
  height: 50px;
  width: 50px;
}

#path {
  position: absolute;
  height: 0;
  width: 0;
  margin: 25px;
  background: linear-gradient(to top right, transparent 49%, red 50%, transparent 51%);
}

<div class="container">
  <div id="path"></div>
  <div id="a1" class="box"></div>
</div>
<button type="button" onclick="slider()">click here</button>

Конечно, если вы хотите, чтобы бокс снова двигался после этого первого перемещения, вы должны использовать другой элемент и так далее ...

Надеюсь, это поможет.