html


<div class="moon"></div>

css


.moon{
  width: 300px;
  height: 300px;
  border-radius: 100%;
  animation: anime 10s linear;
  /* アニメーション終了時の状態(値)を維持 */
  -webkit-animation-fill-mode: forwards;
}

@keyframes anime{
  from{
    box-shadow: none;
  }

  to{
    /* 満月 */
    box-shadow: 300px -100px 0 0 #FEE489 inset;
    /* 三日月 */
    /*box-shadow: -100px 0 0 0 #FEE489 inset;*/
  }
}

三日月も作ってみた

animation-fill-mode

animation-fill-mode: forwards;でアニメーション終了時の状態(値)を維持できます
これを指定しないとアニメーション実行前の状態(値)に戻ってしまう。

下記のサイトから引用しています。

animation-fill-mode CSS プロパティは、CSS アニメーションの適用先に対して、アニメーションの実行前や実行後にどのようなスタイルを適用するかを設定します。

animation-fill-mode - CSS | MDN

CSSで月を表現してみた。

animation-fill-mode