💫 텍스트 변환 애니메이션

텍스트가 일정한 시간 간격으로 변하는 애니메이션을 구현해볼 일이 있어 시도해보았다.
혹시 나처럼 첫 번째 방법을 생각했다가 다른 방법을 고민하는 분들이 있을까봐 기록해두었다.
결과는 아래와 같다.

첫 번째 시도 - content로 애니메이션

CSS의 content 속성과 keyframes를 쓰면 될 것이라고 생각하였다.

<!-- html -->
<div class="wrapper">
	My character pick: 
</div>

/* css */
.wrapper::after {
  content: "Alisa";
  animation: textChange 5s infinite;
}

@keyframes textChange {
  0% {
    content: "Alisa";
  }
  25% {
    content: "Bob";
  }
  50% {
    content: "Julia";
  }
  75% {
    content: "Leo";
  }
}

1초마다 Alisa부터 Leo까지 순차적으로 화면에 보여진다.
단, Chrome에서만 동작하고 Safari에서는 동작하지 않는다.(링크1, 링크2)
(웃긴 건 일부 iOS 디바이스에서는 동작하는 걸 봤다..)
모든 브라우저에서 애니메이션이 보여야 하기 때문에 다른 방법을 찾아보았다.

두 번째 시도 - opacity로 애니메이션

CSS의 content 대신 opacity를 활용하였다.

<!-- html -->
<div class="wrapper">
	My character pick:
    <ul>
      <li>Alisa</li>
      <li>Bob</li>
      <li>Julia</li>
      <li>Leo</li>
    </ul>
</div>

/* css */
ul {
  position: relative;
}

li {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: textChange2 4s infinite;
}
li:nth-child(1) {
  opacity: 1;
}
li:nth-child(2) {
  animation-delay: 1s;
}
li:nth-child(3) {
  animation-delay: 2s;
}
li:nth-child(4) {
  animation-delay: 3s;
}

@keyframes textChange2 {
  0%,
  25% {
    opacity: 1;
  }
  25.01%,
  100% {
    opacity: 0;
  }
}

애니메이션을 각 li에 적용하는데, 대신 animation-delay를 1초마다 주었다.
delay 시간이 지나기 전까지는 opacity: 0이기 때문에 보이지 않다가 delay 시간이 지나면 4초의 0~25% 동안, 즉 1초 동안 opacity: 1이 되어 화면에 보여진다.
1초가 지나자마자 사라지게 하기 위해서 25.01%라는 이전 값(25%)과 약간의 차이가 나는 값을 주 었다.
opacity를 활용한 애니메이션은 모든 브라우저에서 동작한다.
다만 (다른 브라우저에서 확인은 못 했다마는) safari에서 0.01% 시간 차이로 인해 낌빡이는 것처럼 보인다.
아직 왜 그런지 원인을 찾지 못하였으나 브라우저마다 css 애니메이션이 동작하는 프레임수(fps)가 달라서 그런 게 아닐까라고 추측 중이다.(Chrome은 약 60fps, safari는 약 30fps)