HTML 및 CSS를 사용하여 간단한 애니메이션을 만드는 방법...(텍스트 슬라이드 및 페이드)

안녕하세요 친구,

이 게시물에서는 HTML 및 CSS를 사용하여 슬라이드 또는 페이드와 같은 간단한 애니메이션을 만드는 방법을 살펴보겠습니다.

브라우징을 할 때 텍스트가 페이드 인/아웃되거나 텍스트가 왼쪽/오른쪽/위/아래에서 미끄러지는 것을 많은 웹사이트에서 보셨을 것입니다. 그러나 이것이 당신이 생각하는 것만큼 어렵다고 말하겠습니다.

우리는 CSS로 몇 줄의 코드를 작성할 것입니다.

출력 결과는 아래 이미지와 유사해야 합니다.



시작하려면 아래 저장소에서 스타터 파일을 다운로드하거나 포크하십시오.
https://github.com/shameerchagani/animationStaterCode.git

text1 슬라이드를 오른쪽에서 왼쪽으로 만들어 봅시다.

section.text1 p{
  font-weight: 600;
  color: #FA7700;
  animation: slide-right 2s ease-in;
}

위의 코드에서 우리가 한 것은 텍스트의 색상과 글꼴 두께를 변경하는 것입니다.
다음으로 애니메이션, Slide-right를 정의합니다. 먼저 정의해야 하기 때문에 아직 아무 작업도 수행하지 않습니다. 이를 위해서는 다음 코드가 필요합니다.

@keyframes slide-right{
  from{
    margin-left:-100%
  }
  to{
    margin-left:0;
  }
}

위의 코드에서 우리가 하고 있는 것은 여백을 왼쪽에서 -100%로 설정하여 처음에는 텍스트가 보이지 않지만 페이지가 완전히 로드되면 텍스트가 왼쪽에서 오른쪽으로 미끄러지는 것을 볼 수 있습니다. 이 애니메이션의 지속 시간은 2초로 설정했습니다.

출력은 아래와 유사해야 합니다.



그래서 단 몇 줄의 코드로 멋진 애니메이션을 만들었습니다.

이제 text2가 오른쪽에서 왼쪽으로 미끄러지도록 합시다.
어떻게 하는지 이미 짐작하셨을 것입니다.

styles.css 파일에 다음 코드를 입력해 보겠습니다.

 section.text2 p{
  font-weight: 200;
  font-style: italic;
  color: #000F89;
  animation: slide-left 2s ease-in;
}

@keyframes slide-left{
  from{
    margin-right:-100%;
  }
  to{
    margin-right:0;
  }
}

멋진 것은 없나요?

text1의 경우 margin-left를 -100%라고 말했고 여기서 text2는 그와 정반대로 설정했습니다. 그래서 우리는 2초 동안 -100%에서 0까지 margin-right라고 말합니다.

출력은 아래와 같아야 합니다.



페이드인 애니메이션

생각보다 간단합니다. 불투명도를 CSS 속성으로 사용하여 텍스트를 희미하게 만듭니다.

이렇게 활용하고 있습니다

section.text3 p{
  font-weight: 800;
  font-style: italic;
  color: #00703C;
  animation: fadeIn 2s ease-in;
}

@keyframes fadeIn{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

불투명도를 0으로 설정하면; 텍스트가 보이지 않습니다.

위에서 우리는 fadeIn 애니메이션을 정의했고 텍스트의 불투명도를 2초 동안 0에서 1로 설정했습니다. 그래서 text3는 2초 안에 살아날 것입니다...

산출:



이것으로 이 글을 마치겠습니다.
이 기사가 도움이 되었기를 바랍니다.

이 기사가 흥미로웠다면 팔로우하고 적절하게 반응하십시오. 내가 이것을 어떻게 더 좋게 만들 수 있었는지 의견에 알려주십시오.

건배!!