Storybook

color

불이 들어왔다가 사라지는, 즉 텍스트가 밝아졌다 다시 어두워지는 애니메이션을 구현하기 위해서는 어떻게 해야 할까.

먼저 생각나는 방법은 keyframes를 사용하는 것. 원래의 텍스트 색을 검정색으로 해 놓고, keyframes를 통해 시작을 흰색으로 해 놓으면 흰색 → 검정색으로 색이 변화하면서 반짝인다.

.glowing-text__container span {
  **color: #111111;**
  font-size: 192px;
  font-weight: 700;
	animation-duration: 2s;
  animation-name: glowing;
  animation-iteration-count: infinite;
	animation-timing-function: ease;
}

@keyframes glowing {
  0% {
    **color: white;**
  }
}

총 2sec동안 애니메이션이 실행되고, 이 때 애니메이션은 glowing을 사용한다. 무한히 이 애니메이션이 반복되었으면 하기 때문에 animation-iteration-count는 infinite로 한다.

완벽하지는 않지만 색이 반짝이고는 있다. 지금 흰색 → 검정색으로 되어 있는 부분을 조금 수정해보도록 한다.

각각의 텍스트들은 검정색으로 있는 시간이 흰색으로 있는 시간보다 더 길다. 지금은 기본 색상이 검정색으로 되어 있고 애니메이션이 시작되면 확 하얀색으로 바뀐다. 만약 애니메이션 중간의 대부분을 검정색으로 유지하고 시작과 끝을 흰색으로 하면 하얀색이 깜빡이는 듯 구현할 수 있을 것이다.

@keyframes glowing {
  0% {
    color: white;
  }

  5% {
    color: #111111;
  }

  95% {
    color: #111111;
  }

  100% {
    color: white;
  }
}

특수효과(?)

원본 애니메이션은 반짝일 때 주변까지 흐릿해진다. 이를 구현하기 위해서는 filter 속성의 blur(radius)와 text-shadow의 조합을 사용하면 된다.

filter: blur()

이 친구를 사용하여 해당 요소에 흐릿한 효과를 줄 수 있고, 이 친구가 ‘주변까지 흐릿해진다’의 ‘흐릿해진다’를 담당하는 친구이다.

filter: blur(1px)

인자로는 얼마나 흐릿하게 표현할지 blur의 radius를 전달해준다. 당연히 이 값이 커질수록 흐릿한 정도 역시 비례한다.