CSS의 텍스트 애니메이션

Hello Guys 오늘은 텍스트에 대한 CSS 애니메이션을 보여드리겠습니다. 제가 보여드리는 모든 애니메이션은 유사한 코드를 가지고 있으며 해당 애니메이션을 이해한 후에는 이를 사용하여 쉽게 자신만의 애니메이션을 만들 수 있습니다.

시작하자...

주제로 들어가기 전에 먼저 이 점을 이해하십시오.

CSS에서 var는 무엇입니까?

var() 함수는 CSS 변수의 값을 삽입하는 데 사용됩니다.
요소에 "--i:1"과 같은 값을 제공하면 요소에 값이 "1"인 "i"라는 변수가 있음을 의미합니다.
var() 함수를 사용하여 이 변수에 액세스할 수 있습니다.

다른 애니메이션도 비슷하고 이해하기 쉽기 때문에 하나의 애니메이션을 설명하겠습니다.

애니메이션 - 1

이 애니메이션에서는 버블 형식의 텍스트 애니메이션을 만듭니다.

HTML

<ul class="container">
  <li style="--i:1">A</li>
  <li style="--i:1.3">N</li>
  <li style="--i:1.6">I</li>
  <li style="--i:1.9">M</li>
  <li style="--i:2.2">A</li>
  <li style="--i:2.5">T</li>
  <li style="--i:2.8">I</li>
  <li style="--i:3.1">O</li>
  <li style="--i:3.4">N</li>
</ul>

ul 요소를 만들고 그 안에 각 알파벳에 대한 li 요소를 만들고 각 li 요소에 다른 값을 가진 "i"라는 변수를 제공했습니다.

CSS

.container {
  display: flex;
  justify-content: center;
  font-size: 3rem;
  list-style-type: none;
  display: flex;
  gap: 20px;
}

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
li {
  animation-name: bubbly;
  animation-duration: calc(var(--i) * 1s);
   animation-fill-mode:forwards;
  animation-timing-function:ease-in-out
}

/* keyframes */
@keyframes bubbly {
  0% {
    opacity: 0;
    /* transform: translateY(-100px); */
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    /* transform: translateY(0); */
    transform: scale(1);
  }
}

먼저 몇 가지 속성을 사용하여 컨테이너 요소의 스타일을 지정했습니다.

그런 다음 li 요소에 애니메이션 이름을 제공했습니다. 이 애니메이션은 모든 li 요소에 적용됩니다

.

여기서 가장 중요한 부분은 calc() 함수를 사용했다는 것입니다.
calc() 함수는 속성 값으로 사용할 계산을 수행합니다.

calc() 내에서 var() 함수를 사용하여 변수 "i"를 사용했습니다. 변수 "i"의 값을 사용하고 해당 값으로 애니메이션 지속 시간을 설정하여 모든 li 요소의 애니메이션 지속 시간을 설정합니다. 다를 것입니다.

그런 다음 키프레임 내부에서 애니메이션을 정의했습니다.

출력이 있는 다른 애니메이션 -

애니메이션 1 -

애니메이션 2 -

애니메이션 3 -

애니메이션 4 -

애니메이션 5 -

애니메이션 6 -

애니메이션 7 -

애니메이션 8 -

이 게시물을 확인해 주셔서 감사합니다.

저에게 연락하실 수 있습니다 -
인스 타 그램 -
링크드인 -
이메일 - [email protected]

^^ 아래 링크에서 기부로 저를 도울 수 있습니다 감사합니다👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

이 게시물도 확인하십시오.