[HTML,CSS] 글자 색 채우기 애니메이션

 

위와 같이 글자의 색이 좌에서 우로 채워지는 듯한 애니메이션을 짜보았다.

 

HTML

  <div class="box">

    <span class="gray">안녕하세요 반갑습니다.</span>

    <div class="black-box"><span class="black">안녕하세요 반갑습니다.</span></div>

  </div>

  <div class="box">

    <span class="gray">코딩 너무 재밌죠?</span>

    <div class="black-box"><span class="black">코딩 너무 재밌죠?</span></div>

  </div>

 

CSS

.box{

  position: relative;

  transform: translateX(20%);

}

.box:first-child{

  margin-top: 300px;

}

.gray{

  text-align: center;

  font-size: 100px;

  color: #999;

  font-weight: bold;

}

.black-box{

  position: absolute;

  top: 0;

  left: 0;

  overflow: hidden;

  width: 0;

  transition: all 0.3s;

  animation: w100 3s forwards alternate;

}

.box:nth-child(2) .black-box{

  animation-delay: 0.8s;

}

.black{

  text-align: center;

  font-size: 100px;

  color: black;

  font-weight: bold;

  white-space: nowrap;

}

@keyframes w100 {

  0%{

    width: 0;

  }

  100%{

    width: 100%;

  }

}

 

위와 같이 box div로 크게 글자를 감싸주고 안에 span태그 두개를 넣었다.

* p태그를 넣지 않고 span태그를 넣은 이유

p태그는 기본적으로 width가 화면 크기대로 꽉 차있고 span태그는 글자 길이만큼만 차기 때문에 width를 조종할 때 p태그로 하면 잘 되지 않는다. 

 

gray태그의 글자는 그대로 span만 써주고 black태그의 글자는 black-box로 또 감싸주었다. 이 애니메이션을 하기 위해서는 감싸주는 것이 편한 방법이다.

box div에 position:relative를 넣고 black-box div에 position:absolute를 넣어서 두 글자가 겹치게 만들고, black-box에 overflow:hidden을 넣어주었다.

 

*overflow:hidden을 넣은 이유

div박스에 overflow:hidden을 넣지 않고 width:0을 지정해도 글자는 그대로 남아있는 모습이다. 따라서 width보다 넘치는걸 안보이게 하기 위해 넣는다.

 

black이라는 태그의 span에 white-space:nowrap 을 넣어주는 것이 포인트다.

white-space:nowrap은 width가 줄어도 글자가 다음 줄로 넘어간다거나 깨지는 것을 방지해준다.

 

keyframe을 이용해서 black-box의 width를 조절하는 애니메이션을 만들어주면 쉽게 완성이 된다.

 

css를 가지고 애니메이션을 만들 때마다 느끼는 점이 trick이 되게 많다고 느껴진다. 처음에 저 애니메이션을 봤을 땐 글자의 색이 어떻게 저렇게 채워지지라고만 생각했는데 고민하면서 방법들을 생각해보니까 그냥 위에 덮어 씌우면 되겠구나하는걸 깨달았다. 생각과 관점을 좀 달리하면 생각보다 쉽게 많은 애니메이션을 만들 수 있겠구나라는 생각을 항상 한다.