CSS 애니메이션

CSS 애니메이션

하나 또는 여러 CSS 프로퍼티를 부드럽게(부드럽지 않게) 변화시킬 수 있음

하나 또는 여러 CSS 프로퍼티를 부드럽게(부드럽지 않게) 변화시킬 수 있음

• CSS 트랜지션

  프로퍼티가 변하면 브라우저는 자동으로 프러퍼티 값에 해당되는 애니메이션을 화면에 자연스럽게 보여줌

  프로퍼티로 transition-property, transition-duration, transition-timing-function, transition-delay

  transition 이라는 공통 프로퍼티로 네 프로퍼티 한 번에 선언 가능

  • transition-property

    애니메이션 효과를 적용할 프로퍼티 목록 정의

    모든 프로퍼티에 애니메이션 효과 적용할 수 없음

  • transition-duration

    애니메이션 효과 얼마 줄 지 설정

    초 단위나 밀리초 단위 사용할 수 있음

  • transition-delay

    애니메이션 시작되기 전에 지연시간 설정

    음수값일 땐 애니메이션 효과가 중간부터 나타남

  • transition-timing-function

    시간에 따라 애니메이션 효과 어떻게 분배할 지 설정

    프로퍼티 값엔 베지어 곡선이나 단계 올 수 있음

    • 베지어 곡선

      cubic-bezier() 형태로 정의

      여러 내장곡선 있음

      조절점이 4개

      첫번째 조절점은 (0, 0), 마지막 조절점은 (1,1) 이고 중간 조절점은 x가 0과 1 사이에 있어야 하고 y 엔 제약이 없음

      x 축은 시간, y 축은 프로세스 완성 정도

    • 단계

      timing 함수로 애니메이션 여러 단계로 나눌 수 있음

      첫 번째 인수는 단계 수

      두 번째 인수는 start 나 end 중 하나

      step-start, step-end 로 내장 값 사용해 함수 지정 가능

    • transitionend 이벤트

      CSS 애니메이션 끝나면 자동을 ㅗ트리거 됨

      애니메이션 끝났을 때 무언가 하고 싶을 시 사용됨

    • keyframes

      간단한 애니메이션 여러 개 한번에 실행 가능

      애니메이션 이름과 무엇을 언제 어디서 움직일 지 설정

• JS 애니메이션에 비교한 장/단점

  • 장점

    간단한 애니메이션 간단히 수행

    빠르고 CPU 많이 소모 안 함

  • 단점

    덜 유연함. 요소의 ‘폭발’ 같은 특수한 애니메이션 로직 구현할 수 없음

    JS 로는 프로퍼티 변화뿐 아니라 애니메이션에 필요한 새로운 요소 만들 수 있지만 CSS 만으로는 불가능-