keyframe-animation

키프레임 에니메이션을 잘 활용하면 전환 효과만큼 역동적이고 유연하게 만들 수 있을 뿐만 아니라, 키프레임 애니메이션만의 특별한 장점도 모두 유지할 수 있습니다.

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

각 키프레임 에니메이션에는 이름이 필요합니다. fadeIn으로 지정하였습니다.

이는 전역 변수처럼 생각하면 됩니다. CSS 코드의 어느곳에서나 이 키프레임 애니메이션을 사용할 수 있습니다.

키프레임 애니메이션은 JavaScript의 함수와 비슷합니다. 함수를 정의했지만 그 자체 fadeIn로는 아무런 역활을 하지 않습니다.

CSS 속성을 사용하여 특정 요소에 키프레임 애니메이션을 적용합니다.

.element {
	animation: fadeIn 1000ms
}

최소한 이 속성에는 두 가지 값이 필요합니다.

단위는 ms는 밀리초를 의미하므로, 요소가 1초 이상 페이드인되어야 합니다.

from 블록에 입력한 CSS는 즉시 적용되고, 요소는 블록 opacity:1 로 부드럽게 전환됩니다.

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

.particle {
  animation: fadeOut 1000ms;
}

이 코드를 사용하면 1초동안 사라지지만, 그 후 다시 완전히 불투명하게 나타납니다.

왜그럴까요?

키프레임 정의 안의 내용은 애니메이션이 실행되는 동안에만 적용됩니다.

에니메이션이 종료되는 순간, 요소에 영향을 주던 모든 CSS는 증발하여 날라갑니다.

요소의 기본 불투명도는 1(완전 불투명)이므로 opacity:0 키프레임 정의에서 적용을 중단하면 해당 기본값으로 돌아갑니다.

이문제를 해결하는 한 가지 방법은 선택자에 opacity 선언을 추가하는 것입니다.

하지만 이방법은 매요소에 해당 선언을 포함해야 하기 때문에 마음에 들지 않습니다.

이럴때는 채우기 모드가 도움이 될 수 있습니다.

fallback 선언에 의존하는 대신 다음을 사용하여 접근 방식을 고려해보겠습니다.

이값을 설정하면 키프레임 애니메이션의 최종 CSS가 시간이 지난 후에도 유지됩니다.

키프레임 애니메이션을 적용하기 전에 잠시 기다려야 할때가 있습니다. 예를 들어, 특정 요소가 페이드인되지만 시간이 지난후에 나타나도록 하고 싶을 수 있습니다.

이 속성을 사용하면 됩니다.

하지만 이걸사용하면 기본적으로 이상한 동작이 발생합니다.

500ms초 동안은 요소가 완전히 보입니다.

이 문제는 animation-delay 시작부분을 뒤로 미루게 되므로, 해당 시간 동안에는 키프레임 코드가 적용되지 않습니다.

그럼 어떤 방법으로 기다린후에 animation을 시작할수있을까요?

from의 블록의 시작 CSS를 요소에 복사하지만 에니메이션이 시작할 때까지만 복사합니다.

경우에 따라 시작 CSS와 종료 CSS를 모두 유지하고 싶다면 both 키워드를 사용하면 됩니다.

시작되기전 요소가 생성되는 순간에 시작 CSS(opacity:0) 이 적용되고, 종료 CSS(opacity:0.5)는 애니메이션이 종료된 후에도 유지됩니다.

이상 키프레임 애니메이션 사용과 사용전 후를 다루는 Fill mode에대해서 학습해보았습니다.

다음은 keyFrame을 적용한 좋아요 버튼 키프레임 추가하기 부분을 다뤄보겠습니다.

티스토리툴바