フェーズ毎のアニメーションを実装しよう

解答ソースコード

              <div>
  <span></span>
</div>
¥HTML¥
            

              @keyframes movebox {
  25% {
    top: 0;
    left: 100%;
    transform: translateX(-100%);
  }
  50% {
    top: 100%;
    left: 100%;
    transform: translate(-100%, -100%);
  }
  75% {
    top: 100%;
    left: 0;
    transform: translateY(-100%);
  }
  100% {
    top: 0;
    left: 0;
  }
}
div {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #8d8d8d;
}
span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  animation: movebox 5s linear 0s 1 forwards;
}
¥CSS¥