javascript - 如何制作无限向右、向下、向左和向上移动的动画？

Question

我正在尝试制作一个无限向右移动，然后向下，然后向左，然后向上（循环）的动画。

你能帮我么？谢谢 ：）

标签： javascripthtmlcss

Answer 1

有关 CSS 动画的更多信息

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {left:0px; top:0px;}
  25%  {left:100px; top:0px;}
  50%  {left:100px; top:100px;}
  75%  {left:0px; top:100px;}
  100% {left:0px; top:0px;}
}

<div></div>