Css로 텍스트 그라디언트 애니메이션 구현하기

Apple 공식사이트 클론 코딩을 하면서 텍스트에 그라데이션과 애니메이션 구현하는 방법에 대해 공부하였다.

HTML 작성하기

<body>
  <span>
    shoot, view, edit,<br />and share in ProRes<br />or Dolby Vision HDR
  </span>
</body>

그라디언트 적용하기

background-clip: text;
-webkit-background-clip: text;
color: transparent;

텍스트와 배경 색상을 반전시키기 위한 코드이다.

background-image: linear-gradient(방향, 색상1 비율, 색상2 비율, 색상3 비율...);

그라디언트 색상은 background-image 안에 linear-gradient 함수로 표현한다. 방향은 deg 단위나 turn, 상하좌우로 설정한다. 색상은 시작부터 끝 지점까지 차례로 나열할 수 있으며, 비율을 지정하여 차지하는 범위를 조절한다.

span {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(
    180deg,
    #ffb6ff,
    #b344ff 10%,
    #ae38ff 33%,
    #ffb6ff 45%,
    #ffe3ff 50%,
    #ffb6ff 66%,
    #b344ff
  );
}

그라디언트의 줄바꿈 없애기

span은 display 속성이 inline인 태그이기 때문에 줄바꿈 된 문장 각각에 그라디언트가 적용된다. display 속성을 block으로 바꾸면 해결된다.

span {
  display: block;
  ...
}

애니메이션 효과

그라디언트 배경의 세로 크기를 원하는 배수로 늘리고 위치를 아래에서 위로 올리는 방식으로 구현한다.

텍스트 뒤에서 이런 애니메이션이 발생한다.

span {
  ...
  background-size: 100% 300%;
  background-position-y: 0%;
  animation: gradient 2s ease-in-out forwards;
}

@keyframes gradient {
  from {
    background-position-y: 0%;
  }
  to {
    background-position-y: 100%;
  }
}

결과

마치며

애플 공식사이트는 다양한 애니메이션으로 구성되어 있다. 하나씩 구현해가면서 CSS에 흥미를 더해가고 있다. 눈속임이 마술 같고 재밌다 🎭