在继续使用DOM之前如何使用DOM完全应用一个CSS过渡？

Question

我想沿着特定路径移动箭头。我知道我必须应用CSS转换才能移动箭头，但是我遇到了一个问题。

箭头需要先向下移动，然后向左移动，然后向上移动，直到箭头从其起始位置到达其初始位置的同一水平平原为止。

我可以将其向下移动，这是第一步。但是，如果我使用所有三种转换方法，它将直接将其移至最终位置，而无需遵循路径。我尝试将三种转换方法及其转换放入单独的函数中，并在上一步结束时调用每个函数，但结果是相同的。

这里是HTML：

<div>
<img src="img/arwTest.png" alt="Click to rotate" id="arrow">
<img src="img/moveTest_2.png" alt="demonstration" id="demo">
<p>Click anywhere to move the arrow along the path.</p>
</div>

这里是CSS：

#demo, #arrow {
display: block;
margin: 0 auto;
}

#demo {
height: 300px;
}

#arrow {
height: 40px;
position: absolute;
left: 50%;
}

p {
text-align: center;
padding: 20px;
}

这里是JavaScript：

const arrow = document.getElementById("arrow");
arrow.style.transform = `rotate(90deg)`;

addEventListener('click', () => {
arrow.style.transform = `translate(0px,200px)`;
arrow.style.transition = `2s`;
})

Here's全部。

Answer 1

[我相信您正在寻找@keyframes css语句和animation css属性：

@keyframes motion {
  0.000% { left: 30%; top: 70%; }
  33.33% { left: 70%; top: 70%; }
  66.66% { left: 50%; top: 30%; }
  100.0% { left: 30%; top: 70%; }
}

html, body {
  position: absolute;
  width: 100%; height: 100%;
  left: 0; top: 0;
  margin: 0; padding: 0;
}

.point {
  
  position: absolute;
  width: 20px; height: 20px;
  margin-left: -10px; margin-top: -10px;
  border-radius: 100%;
  background-color: #500000;
  
  animation: motion 2000ms infinite linear;
  
}

<div class="point"></div>

Answer 2

新的CSS属性可以帮助您解决这个问题。

这是偏移路径。

在摘要中查看如何将其用于您要求的动作

悬停容器以将其激活

此外，请注意，在堆栈溢出中，需要发布代码示例。即使不起作用！

#container {
  width: 400px;
  height: 150px;
  border: dotted 5px black;
  margin: 30px;
   
}

#motion-demo {
  width: 40px;
  height: 40px;
  background: cyan;
  offset-path: path('M400 0 v 150 h -400 v -150');
   offset-distance: 0%;
   transition: offset-distance 2s;
 }


#container:hover #motion-demo {
    offset-distance: 100%;
}

<div id="container">
<div id="motion-demo"></div>
</div>