css 애니메이션 반복 되도록

</p>

<p>:root {

  --anim-delay: 3s;

  --anim-duration: calc(var(--anim-delay) * 6);

}</p>

<p>.about-item-box .about-arrow1 {

  width: 112.23px;

  height: 65.61px;

  margin-top: 51px;

  margin-left: 133px;

  opacity: 0;

  animation: fadeInOut var(--anim-duration) infinite;

  animation-delay: calc(0 * var(--anim-delay));

}</p>

<p>.about-item-box .about-arrow2 {

  width: 100px;

  height: 65.61px;

  margin-top: 53px;

  margin-left: 136px;

  opacity: 0;

  animation: fadeInOut var(--anim-duration) infinite;

  transform: rotate(60deg);

  animation-delay: calc(1 * var(--anim-delay));

}</p>

<p>.about-item-box .about-arrow3 {

  width: 100px;

  height: 65.61px;

  margin-top: 229px;

  margin-left: -12px;

  opacity: 0;

  animation: fadeInOut var(--anim-duration) infinite;

  transform: rotate(120deg);

  animation-delay: calc(2 * var(--anim-delay));

}</p>

<p>.about-item-box .about-arrow4 {

  width: 100px;

  height: 65.61px;

  margin-top: 413px;

  margin-left: -194px;

  opacity: 0;

  animation: fadeInOut var(--anim-duration) infinite;

  transform: rotate(-179deg);

  animation-delay: calc(3 * var(--anim-delay));

}</p>

<p>.about-item-box .about-arrow5 {

  width: 100px;

  height: 65.61px;

  margin-top: 408px;

  margin-left: -337px;

  opacity: 0;

  animation: fadeInOut var(--anim-duration) infinite;

  transform: rotate(-478deg);

  animation-delay: calc(4 * var(--anim-delay));

}</p>

<p>.about-item-box .about-arrow6 {

  width: 100px;

  height: 65.61px;

  margin-top: 224px;

  margin-left: -192px;

  opacity: 0;

  animation: fadeInOut var(--anim-duration) infinite;

  transform: rotate(303deg);

  animation-delay: calc(5 * var(--anim-delay));

}</p>

<p>@keyframes fadeInOut {

  0%, 10%, 30%,

  100% {

    opacity: 0;

  }

  15% {

    opacity: 1;

  }

}</p>

<p>