on1ystar 머릿속을 정리, 기록하는 곳

HTML5/CSS3 transition/@keyframes/animation

08 Feb 2021


transition

CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공

CSS transitions는 여러분이 (명시적으로 목록을 작성해서) 어떤 속성을 움직이게 할지, (딜레이를 설정해서) 언제 애니메이션이 시작할지, (지속 시간을 설정해서) 트랜지션을 얼마나 지속할지, 그리고 (예를 들면, 선형이거나 초기 빠름, 종료 느림과 같은 타이밍 함수를 정의해서) 어떻게 트랜지션을 실행하는지 결정하게 합니다.

transition 가능한 대표 속성

  • 위치 속성: top, left, bottom, right
  • 크기 속성: width, height
  • 박스 속성: margin, padding
  • 테두리 속성: border-width, border-radius, border-color
  • 색상 속성: color, background-color
  • 투명도 속성: opacity
  • 변환 속성: transform

transition 속성

  • transition-delay: 이벤트 발생 후 몇 초 후에 재생할 지(transition이 실제로 시작하는)
  • transition-duration: 몇 초 동안 재생할 지(transition이 일어나는 지속 시간)
  • transition-property: 트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름

  • transition-timing-function: 속성의 중간값을 계산하는 방법을 정의하는 함수를 명시

    → 예시: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

위 속성들을 한 번에 사용하는 방법

div {
  transition: <property> <duration> <timing-function> <delay>;
}

transition 완료 감지 이벤트

트랜지션을 완료하면 발생하는 단일 이벤트 → transitionend

el.addEventListener("transitionend", updateTransition, true);

transitionend 이벤트는 두 속성을 제공

  • propertyName : 트랜지션을 완료한 CSS 속성의 이름을 나타내는 문자열
  • elapsedTime : 이벤트가 발생한 시점에 해당 트랜지션이 진행된 시간을 초로 나타내는 실수


@keyframes

개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어

@keyframes slidein {

/* %가 의미하는 것은 애니메이션의 시작과 끝 상태를 의미 */
@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}
  • slidein, identifier: animation-name으로 사용
  • from: 0%를 의미
  • to: 100%를 의미

0% ~ 30% top: 0 → 50px

30% ~ 100% top: 50px → 100px

0% ~ 68% left: 0 → 50px

68% ~ 72% left: 50px 유지

72% ~ 100% left: 50px → 100%


animation

엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환

애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어져 있다.

animation 속성

  • animation-delay:엘리먼트가 로드되고 나서 언제 애니메이션이 시작될 지

  • animation-direction: 애니메이션이 종료된 후 진행 방향(정방향, 역방향)

    → normal reverse alternate alternate-reverse
  • animation-duration: 애니메이션을 몃 초 동안 재생할 지
  • animation-iteration-count: 애니메이션 반복 횟수 (infinite지정으로 무한 반복 가능)
  • animation-name: 애니메이션 이름 설정 (@keyframes 규칙을 이용)
  • animation-play-state: 애니메이션을 멈추거나 다시 시작(paused, running)

  • animation-timing-function ****중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정

    → 참고: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

  • animation-fill-mode: 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될 지 지정

    → forwards: 대상은 실행 된 애니메이션의 마지막 키프레임에 의해 설정된 계산 된 값을 유지

    → 참고: https://developer.mozilla.org/ko/docs/Web/CSS/animation-fill-mode#example

한 번에 지정하기

div {
  animation: duration | timing-function | delay | iteration-count | direction |
    fill-mode | play-state | name;
}


REFERENCE

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

https://developer.mozilla.org/ko/docs/Web/CSS/@keyframes

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations

모던 웹을 위한 HTML5+CSS3 바이블 - 윤인성

Related posts