CSS 2 썸네일형 리스트형 문제 해결 2021.06.24 css 애니메이션 버벅거림(jank)해결하기 1편 오늘의 문제 내가 한땀한땀 예쁘게 만든 애니메이션... 코드는 문제 없는데, 실제 화면에서는 왜 덜덜덜거릴까? See the Pen jank-animation-before by ylem76 (@ylem76) on CodePen. 후후... 임베드한 코드펜에서는 왜 멀쩡해보일까? ^^... 이런 걸 뭐라고 하나요? css를 이용해 애니메이션을 구현하다보면 예상치 못하게 덜덜덜 거리는 걸 볼 수 있다. 이런 문제를 두고 쟁크(jank)라고 하고, 브라우저 렌더링 단계 중 리플로우(레이아웃)와 관계가 있기 때문에 리플로우라고 검색해도 관련 내용을 찾을 수 있다. 원인 화면 주사율 스크린 기기는 1초에 화면을 60번씩 그린다. (화면주사율이 60Hz이라는 뜻은 이걸 말한다.) 스크린 기기는 1초에 60번을 그리.. 문제 해결 2021.06.16 css display none 애니메이션 오류 수정하기 오늘의 문제 display:none; display:block; 에 transition 애니메이션이 적용되지 않는다! See the Pen display none animation1 by ylem76 (@ylem76) on CodePen. 메뉴를 마우스 오버했을 때 하위 메뉴가 보이고, 마우스 아웃하면 사라지는 흔한 메뉴. 간단할 것 같아서 css transition으로 구현하려고 하는데, 애니메이션이 뚝뚝 끊기고 안 예쁘다..!!! 어째서 이런 현상이 발생하는 건지 원인을 알아보고 해결 방법을 고민해보았다. 문제 분석 display none에서만 생기는 트랜지션 오류 화면에 보이지 않게 만드는 방법은 여러 가지가 있다. display:none; opacity:0; visibility:hidden; tr.. 이전 1 다음