실무
-
[JS] requestAnimationFrame실무/JS 2021. 8. 16. 02:21
- requestAnimationFrame requestAnimationFrame 메서드는 브라우저가 repaint 전에 애니메이션을 업데이트하기 위해 지정된 함수를 호출하도록 요청 repaint 전에 호출할 인수로 callback을 사용 callback 횟수는 보통 초당 60회이지만 W3c 권장사항에 따라 대부분의 웹 브라우저에서 디스플레이 새로고침 빈도와 일치 성능과 배터리 수명을 개선하기 위해 백그라운드 탭이나 숨겨진 iframe에서 실행할 때 대부분의 브라우저에서 requestAnimationFrame 호출이 일시 중지된다. callback 메서드에는 현재 시간을 나타내는 DOMHighResTimeStamp 단일 인수가 전달된다. window.requestAnimationFrame(callback..
-
[CSS] animations실무/CSS 2021. 8. 13. 01:53
- CSS animations 구성 요소 animation property @keyframes - animation property : animation 할 요소의 스타일을 지정 => CSS animation 시퀀스 생성 animation-name animation keyframe을 설명하는 @keyframes의 이름을 지정 animation-duration animation 한 주기를 완료하는데 걸리는 시간 animation-timing-function animation 타이밍을 구성 가속 곡선을 설정하여 animation이 keyframe을 통해 전환되는 방식 예) linear, ease-in-out, step, cubic-bezier 등 https://developer.mozilla.org/en-U..
-
[CSS] transitions실무/CSS 2021. 8. 12. 00:24
- CSS transitions CSS 속성(properties)을 변경할 때 애니메이션 속도를 조절하는 방법을 제공 속성 변경은 즉시 영향을 미치는 대신, 일정 기간에 걸쳐 일어나도록 가능 초기 상태와 최종 상태 사이의 중간 상태는 자동적으로 계산된다. 애니메이션 시작 시기(지연 설정), 전환 지속 시간(기간설정), 전환 실행 방법 속성 지정 가능 transition-property transition을 적용해야 하는 CSS 속성의 이름을 지정 명시된 CSS 속성들만 애니메이션 발생 transition-duration transition이 발생해야 하는 기간을 지정 모든 속성에 동일한 기간을 지정하거나 각 속성에 다른 기간 지정 가능 transition-timing-function 속성에 대한 중간 값..