[아임웹 코드] 무한으로 폰트 굵기를 바꾸는 애니메이션

시연 동영상 보기

※ 섹션 설정에서 가로 100%/좌우 0PX설정 후 사용하세요!

<div class="textanimationsection">

<div class="container">

  <p class="textanimationtxt" aria-label="Geist Sans">

    <span aria-hidden="true">I</span><span aria-hidden="true">M</span><span aria-hidden="true">W</span><span aria-hidden="true">E</span><span aria-hidden="true">B</span><span aria-hidden="true"> </span><span aria-hidden="true">C</span><span aria-hidden="true">O</span><span aria-hidden="true">D</span><span aria-hidden="true">E</span>

  </p>

</div>

</div>

<style>

  @font-face {

  font-family: "Geist";

  src: url("https://pham.codes/d/GeistVF.woff2") format("woff2");

}

.textanimationtxt {

  font-family: "Geist";

  font-size: 128px;

  margin: 0;

  background-color: white;

  background-image: linear-gradient(0deg, #111 70%, white);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  -moz-background-clip: text;

  -moz-text-fill-color: transparent;

  filter: drop-shadow();

  --wght-min: 32;

  --wght-max: 240;

}

.textanimationtxt > span {

  animation: breath 1.5s alternate cubic-bezier(0.37, 0, 0.63, 1);

  animation-iteration-count: infinite;

  animation-delay: 1s;

  animation-fill-mode: both;

}

@keyframes breath {

  0% {

    font-variation-settings: "wght" var(--wght-min);

  }

  100% {

    font-variation-settings: "wght" var(--wght-max);

  }

}

.container {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100%;

}

.textanimationsection {

  height: 100vh;

  background: white;

  color: #111;

}

</style>

<script>

  const spans = document.querySelectorAll('p span');

const numLetters = spans.length;

spans.forEach(function(span, i) {

    const mappedIndex = i - (numLetters / 2)

    span.style.animationDelay = (mappedIndex * 0.25) + 's';

});

</script>