CSS를 사용하여 페이드 아웃 전환 구현

  2. 어떻게
  3. CSS 하우투
  4. CSS를 사용하여 페이드 아웃 전환 구현
Neha Imran 2023년6월20일
CSS CSS Transition
  1. CSS 페이드 전환
  2. 애니메이션 속성을 사용하여 페이드 아웃
  3. 전환 속성을 사용하여 페이드 아웃
  4. 인라인 CSS를 사용하여 페이드 아웃
  5. 외부 CSS를 사용하여 페이드 아웃
  6. Dom 이벤트를 사용하여 페이드 아웃
CSS를 사용하여 페이드 아웃 전환 구현

이 기사에서는 페이드 아웃 애니메이션에 대해 알아보고 내부, 외부 및 인라인 CSS를 사용하여 이를 구현하는 방법을 알아봅니다. 나중에 DOM 이벤트를 사용하여 페이드 아웃 기능을 구현하는 방법을 살펴보겠습니다.

CSS 페이드 전환

CSS 페이드 전환은 이미지, 텍스트 또는 배경과 같은 요소가 페이지에서 점진적으로 나타나거나 사라지는 시각적 효과입니다.

CSS 전환 속성 또는 애니메이션 속성을 사용하여 이러한 효과를 생성합니다. transition 속성을 사용하면 시작 및 최종 상태만 지정할 수 있습니다.

CSS 전환과 애니메이션의 차이점은 전환에는 사용자가 요소 위로 마우스를 가져가는 것과 같은 트리거가 필요하지만 애니메이션에는 필요하지 않다는 것입니다. 페이지가 로드되면 애니메이션의 기본 동작이 시퀀스를 즉시 시작합니다.

그러나 animation-delay 매개변수를 사용하여 지연시킬 수 있습니다. 이 기사는 FadeOut에만 초점을 맞춥니다.

CSS를 사용하여 페이드 아웃 전환을 달성하는 방법을 살펴보겠습니다.

애니메이션 속성을 사용하여 페이드 아웃

위에서 설명한 것처럼 fadeOut 기능은 CSS의 transition 및 animation 속성 모두에 의해 달성될 수 있습니다. animation 속성을 사용하여 기능을 생성하여 시작하겠습니다.

암호:

<html>
    <head>
        <style>
            .fade {
            animation: fadeOut 5s;
         }

         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
        </style>
    </head>
    <body>
        <div class="fade"> Internal CSS Fade Out using Animation !</div>
    </body>
</html>

먼저 div에 fade 클래스를 할당합니다. 모든 스타일링은 이 클래스에서 이루어집니다.

이제 style 태그로 이동합니다. 클래스에서 호출하는 첫 번째 속성은 animation: fadeOut 5s이며 이 속성을 사용하면 웹 페이지에서 창의적인 애니메이션을 만들 수 있습니다.

fadeOut은 애니메이션 이름이고 5s는 애니메이션이 순환을 완료하는 데 걸리는 시간을 정의하는 애니메이션 지속 시간입니다. 그런 다음 fadeOut이라는 애니메이션 이름에 키프레임을 사용했습니다.

키프레임은 애니메이션 규칙을 결정하는 데 사용됩니다. 0%에서 요소의 불투명도/투명도를 1로 지정하고 있습니다. 이는 CSS의 불투명도 속성 값 범위가 0~1이므로 100%를 의미하고 불투명도는 100%에서 0이 됩니다. 완전한 가시성으로 나타나고 천천히 사라집니다.

전환 속성을 사용하여 페이드 아웃

CSS의 transition 속성을 사용하여 기능을 구현해 봅시다. transition 속성이 작동하려면 호버, 포커스 등과 같은 트리거 기능이 필요합니다.

암호:

<html>
    <head>
        <style>
            .fadeOut:hover {
                opacity: 10%;
                transition: opacity 3s;
            }
         }
        </style>
    </head>
    <body>
        <div class="fadeOut"> Internal CSS Fade Out using Transition !</div>
    </body>
</html>

위의 코드에서 transition: opacity 3s라고 씁니다. transition의 첫 번째 하위 속성은 전환이 적용되어야 하는 CSS 속성의 이름을 지정하는 transition-property입니다.

두 번째 하위 속성은 전환이 발생해야 하는 기간을 지정하는 transition-duration입니다. 따라서 우리는 단순히 사용자가 텍스트에 커서를 놓았을 때 텍스트의 불투명도가 주어진 시간 동안 10%가 되어야 한다고 말하는 것입니다.

인라인 CSS를 사용하여 페이드 아웃

인라인 CSS는 태그 내부의 HTML 요소에 스타일을 부여합니다. 인라인 CSS는 HTML 태그 내부의 모든 속성을 사용할 수 없으므로 권장되지 않습니다.

암호:

<html>
    <head>
        <style>
         @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }
        </style>
    </head>
    <body>
        <div class="fade" style="animation: fadeOut 5s"> In-line CSS Fade Out !</div>
    </body>
</html>

인라인 CSS를 사용하여 코드를 작성하고 있으므로 div 태그 안에 키프레임을 작성하지 않은 이유가 여기에 있을 수 있습니다. 키프레임은 HTML 요소의 일부가 아니므로 애니메이션에서 호출됩니다.

외부 CSS를 사용하여 페이드 아웃

외부 스타일 시트는 .css 확장자를 가진 독립 파일로 생성됩니다. 외부 스타일 시트는 CSS 규칙 목록이며 HTML 태그를 사용할 수 없습니다.

외부 스타일 시트는 HTML 페이지의 head 태그에 있는 link 태그로 연결할 수 있습니다. 단일 HTML 페이지는 원하는 만큼 많은 외부 스타일 시트를 활용할 수 있습니다.

예를 들어 style.css라는 이름 또는 원하는 이름으로 파일을 만들고 위 예제의 스타일 태그 코드를 파일에 복사합니다. HTML 페이지에 CSS 파일 참조를 추가해야 합니다.

암호:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="fade">External CSS Fade Out !</div>
    </body>
</html>

Dom 이벤트를 사용하여 페이드 아웃

페이드 아웃 기능을 구현하는 또 다른 방법은 DOM onMouseOver 및 onMouseOut 이벤트를 사용하는 것입니다. onMouseOver 이벤트는 마우스 포인터가 요소 위로 이동될 때 트리거되고 onMouseOut 이벤트는 마우스가 요소에서 멀어지면 발생합니다.

암호:

<html>
    <head></head>
    <body>
        <div class="fadeOut" onMouseOver="this.style.opacity='10%'"onMouseOut="this.style.opacity='100%'">
            I will fade out on mouse hover
        </div>
    </body>
</html>

onMouseOver 이벤트에 대해 불투명도를 10%로 설정했습니다. 요소를 완전히 페이드 아웃하고 불투명도를 0으로 설정한다고 가정합니다.

출력에서 볼 수 있듯이 커서가 위에 있으면 텍스트가 희미해지고 커서를 제거하면 원래 위치로 돌아갑니다.

관련 문장 - CSS Transition