[React] animation을 이용한 글자 깜빡임 효과 넣기

이전에 제작했던 오리 mbti에서 결과창으로 넘어가야 하는 상황에 버튼을 누르지 않고 기다리는 사용자가 정말정말 많았다... 그래서 "눌러서 결과보기"라는 텍스트를 좀 더 눈에 잘 띄게 만들기 위해 animation을 이용하게 되었다.

해당 텍스트가 들어있던 TxtBox에 blink-effect라는 이름으로 50%지점에 투명도를 0으로 만들어주고, 이를 반복하는 애니메이션을 넣어주었다.

  @keyframes blink-effect {
    50% {
      opacity: 0;
    }
  }

  animation: blink-effect 1s step-end infinite;

fade효과를 줄지 어떻게 할지 고민을 정말 많이 했는데.. 잘 해결되어 다행이다!