Jess2.xyz

[CSS] Fade In / Fade Out Animation 추가하기

May 03, 2020

css

CSS 만으로 서서히 나타나고 서서히 사라지는 애니메이션을 구현할 수 있다.

우선, 애니메이션 속성에 대해 알아보자.

Animation

Animation 속성은 애니메이션에 이름을 지정하거나 지속시간, 속도 조절 등을 지정할 수 있는 속성을 가지고 있다.

애니메이션 속성 종류

  • animation-name : @keyframes 이름 (예제에서는 fadeOut 을 사용)
  • animation-duratuion : 타임 프레임의 길이, 키프레임이 동작하는 시간을 설정할 때 사용
  • animation-timing-function : 애니메이션 속도 조절 / 그래프 ( linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier )
  • animation-delay : 애니메이션을 시작하기 전 지연시간 설정
  • animation-iteration-count : 반복 횟수 지정
  • animation-direction : 반복 방향 설정 ( 정방향 / 역방향 / 번갈아가며)
  • animation-fill-mode : 애니메이션 시작 / 끝 상태 제어 ( none / forwords / backwords / both )

Fade In

opacity를 애니메이션으로 n초 동안 0에서 1까지 주면 된다. (from: 0, to: 1)

.fade-in-box {
  display: inline-block;
  background: yellow;
  padding: 10px;
  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari and Chrome */
  -o-animation: fadein 3s; /* Opera */
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Fade In 실행 결과

  • 우측 하단의 ‘Rerun’ 버튼을 누르면 실행 결과를 다시 볼 수 있다.

Fade Out

Fade In과 반대로 opacity를 애니메이션으로 n초 동안 1에서 0까지 주면 된다. (from: 1, to: 0)

.fade-out-box {
  display: inline-block;
  background: yellow;
  padding: 10px;
  animation: fadeout 3s;
  -moz-animation: fadeout 3s; /* Firefox */
  -webkit-animation: fadeout 3s; /* Safari and Chrome */
  -o-animation: fadeout 3s; /* Opera */
  animation-fill-mode: forwards;
}
@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-moz-keyframes fadeout { /* Firefox */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-o-keyframes fadeout { /* Opera */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

Fade Out 실행 결과

  • 우측 하단의 ‘Rerun’ 버튼을 누르면 실행 결과를 다시 볼 수 있다.

👋@Jess2
👩🏻‍💻Frontend Developer

GitHubFacebookLinkedIn