Web Front End/CSS

[CSS] transitionend Event

transitionend Event란? transition이 완료된 이후에 발생하는 이벤트, transition 완료를 감지한다. transition과 함께 사용하는 함수 addEventListener를 사용하여 이벤트 모니터링 가능 예제 testDiv 의 콘텐츠에 마우스를 hover했을 때 2초 동안 원래 크기보다 1.1배 커지게 만든다.(transition) transition이 끝나면 이를 감지하고 "이것은 테스트 텍스트입니다.." 라는 텍스트가 보이도록 한다.(transitionend) .testDiv { transition: 2s; } .testDiv:hover { transform: scale(1.1); } const test = document.querySelector(.testDiv); t..

[CSS] requestAnimationFrame vs transform/transition

requestAnimationFrame vs transform/transition rAF transform 성능 비교적 느림 비교적 빠름 사용되는 상황 세밀한 조작이 필요한 경우 2개 이상의 애니메이션을 동작시킬 때 간단하고 규칙적인 경우 구현 방법 setTimeout의 비정확한 시간 반복에 대한 대안 재귀 호출 사용 애니메이션 처리를 빠르게 하기 위해 GPU 가속 속성 사용 두 개를 같이 구현했을 때에는 transition으로 만든 애니메이션이 더 자연스럽게 동작하는 것을 볼 수 있었다. See the Pen JjdGOqv by choisohyun (@choisohyun) on CodePen. 애니메이션 생성 시 가능한 CSS transition/animation을 사용하는 것이 좋다. 애니메이션이 너..

[CSS] transition

transition이란? CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공하는 속성 속성의 변화가 일정 기간에 걸쳐 일어나도록 함 변화를 부드럽게 보여줄 수 있음 예제 transition:width 2s, height 2s, background-color 2s, transform 2s;transitionend - transition 완료 감지하기 addEventListener를 사용하여 이벤트 모니터링 가능 el.addEventListener("transitionend", updateTransition, true);Reference https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

[CSS] transform

transform이란? 좌표공간을 변형함 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿈 transform의 변형 평면에서의 변형 3D 공간에서의 회전, 확대, 이동, 기울이기 회전: rotate() 확대축소: scale() 이동: translate(), translateX(), translateY() 기울이기: skew() 예제 HTML Transformed elementCSS div { border: solid red; transform: translate(30px, 20px) rotate(20deg); width: 140px; height: 60px; }결과 Reference https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transforms..

[CSS] requestAnimationFrame

requestAnimationFrame이란? rAF DOM 기반 스타일 변경, 캔버스 또는 WebGL 등 애니메이션에 사용하기위한 기본 API Javascript 실행 최적화를 위해 setTimeout, setInterval을 피하고 requestAnimationFrame 사용 window.requestAnimationFrame(callback);Reference https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution?hl=ko https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ https://develo..

[CSS] VSync와 브라우저

VSync란? Vertical sync (수직 동기화) GPU, 비디오 게임 및 모니터를 위한 최초의 동기화 기술 게임의 프레임 속도와 게임 모니터의 재생 빈도를 동기화하는 그래픽 기술 ⇒ 게임 FPS는 모니터가 따라잡을 수 없는 속도로 정보를 전달했음 ⇒ 서로 다른 화면이 충돌해 화면이 어긋나게 보여짐(Screen Tearing) ⇒ VSync 도입으로 FPS에 제한을 두어 동기화되게 하고, 부드러운 게임 화면을 볼 수 있게 됨 해상도, 색상, 밝기를 향상시킬 수는 없음 Frame Timing이란? 프레임을 실행/랜더링하는 데 걸리는 시간 랜더링되는 여러 프레임 간 타이밍이 얼마나 일관성 있는지도 보여줌 서로 다른 Frame Rates 프레임 속도가 낮을수록 프레임을 렌더링하는 데 시간이 오래 걸림 프..