web-animations-API

라이브러리를 사용해야 가능했던 웹 애니메이션 관련 기능들의 표준 구현체이다.
CSS 애니메이션 구현을 기반으로 설계된 API로,
기존 CSS 애니메이션의 장점을 살리면서 구현은 더 간편한 것이 특징이다.

What I Learned

• 자바스크립트로 CSS 애니메이션을 자유자재로 컨트롤
  
• 웹 애니메이션 표준 기술(Web Standard)

Todo

• CSS animation VS JS animation 알아보기
• CSS Transition
  • object 태그를 활용하여 svg에 transition 적용 실습
• CSS Animation
• GPU 가속과 레이아웃 재계산이 필요한 속성들 알아보기
• Web Animation API 기본
  • Web Animation API란?
  • 기본 애니메이션 만들기
  • 키프레임과 옵션 분리하기
  • 애니메이션 컨트롤(Promise 사용가능)
    • animation.play()
    • animation.pause()
    • animation.playbackRate
    • animation.playState
    • animation.finished
    • animation.ready
  • 애니메이션 생성자 이용
• 여러 개의 객체에 애니메이션 적용하기
  • 각각의 객체에 개별 애니메이션 적용하기
  • GroupEffect로 한꺼번에 애니메이션 적용하기
  • SequenceEffect로 순차적으로 애니메이션 적용하기
  • Starfield 만들기
    
  • Motion Path로 경로를 따라 이동시키기
    

개인적인 궁금증 해결

• Canvas VS Web Animation API