CSS animation과 웹 렌더링

BeomDev·2023년 3월 13일

transform

요소에 다양한 변형을 줄 수 있는 속성

transform-origin: 100%, 100%; : 요소의 기준점을 변경

transform: scale(1.5); : 요소의 크기 1.5배 확대

transform: rotate(45deg); : 45˚만큼 요소 회전

transform: translate(-50%, -50%); : 자신 기준 x, y축으로 이동

transform: skew(30deg, 50deg); : 요소를 x, y축으로 왜곡

transition

CSS 속성값이 변화할 때, 변화가 일정시간에 걸쳐 일어날 수 있도록 하는 속성

transition-property: [all/none/initial/inherit/attribute]` : 요소 설정
/* 
  all: 기본값, 모두 설정, 
  none: 모두해제
  initial: 초기값(`all`)으로 되돌림, 
  inherit: 부모요소의 값을 상속받음 
*/

transition-duration: transition이 걸리는 시간 지정

transition-timing-function: 진행속도 설정

transition-delay: 지연시간 설정

text-decoration은 transition이 적용이 안됨
text-decoration으로 animation 효과를 주고 싶다면 ::before ::after 가상요소를 사용해 지정하는 방식이 있음

animation

JavaScript 없이도 CSS만으로 애니메이션을 만들 수 있다.

@keyframes

2개 이상의 애니메이션 중간 상태를 설정한다

@keyframes{
	from{
    }
   	to{
    }
}
@keyframes{
	0%{}
    50%{}
    100%{}
}

animation-name

애니메이션의 이름을 설정한다. 이름의 시작에는 영문 소문자, 언더바( _ ), 하이픈( - ), 문자열만 사용할 수 있다.
	.class{
    	animation-name: animation;
	}
    @keyprames animation

animation-duration

애니메이션이 한 사이클을 도는데 걸리는 시간을 설정한다.
.class{
	animation-duration: .2s;
}

animation-timing-function

애니메이션이 진행되는 방식을 설정한다.

.class{
	animation-timing-function: ease; /* 기본값, 중간까지 속도가 증가하고 이후 느려짐 */
	animation-timing-function: linear /* 균일하게 */
	animation-timing-function: steps(4); /* 4단계에 걸쳐 표현 */
}

animation-delay

애니메이션이 언제 시작할지 설정한다.
음수값을 지정하면 애니메이션이 -(-2)초 지난 시점에서 시작된다.

animation-iteration-count

애니메이션 재생 횟수를 설정한다

.class{
	animation-iteration-count: infinite; /* 무한 반복 */
    animation-iteration-count: 0.5 /* 절반 재생 */

animation-direction

애니메이션의 재생 방향을 정한다

.style{
	animation-direction: normal; /* 기본값, 정방향 재생*/
    animation-direction: reverse; /* 역방향 재생 */
    animation-direction: alternate; /* 정방향, 역방향 순으로 반복*/
    animation-direction: alternate-reverse; /* 역방향, 정방향 순으로 반복 */
}

animation-fill-mode

애니메이션 실행 전과 후의 대상의 스타일을 적용하는 방법을 지정
normal 기본값. 스타일 적용 없음.
forwards: 요소의 기존 스타일로 시작. 애니메이션 마지막 스타일 유지.
backwards : 첫번째 정의된 값으로 시작. 요소의 기존 스타일로 돌아감.
both : 첫번째 정의된 값으로 시작. 마지막 값 유지

animation-play-state

애니메이션 실행 여부 설정
paused: 정지
running: 재생

단축속성

.class{
	animation: animation-name 
    		animation-duration 
			animation-timing-function 
			animation-delay 
			animation-iteration-count 
   			animation-direction 
   			animation-fill-mode 
   			animation-play-state
}

페이지는 어떻게 보여지게 될까?

브라우저의 렌더링은 5단계로 이루어진다

HTML 파싱
HTML 파일을 DOM(Document Object Model)으로 변환, <link>, <img>는 리소스를 다운로드, <script>를 만나면 파싱을 중단하고 자바스크립트를 해석
CSS 파싱
CSS 파일을 CSSOM(CSS Object Model)으로 변환, CSSOM 정보를 통해 DOM 파일에 스타일을 입힘
렌더 트리 생성
DOM과 CSSOM 정보를 결합해 브라우저 렌더링을 위한 렌더 트리를 생성
레이아웃(리플로우)
viewport 내에서 각 요소의 위치와 크기를 정확하게 그린 Box 모델을 출력, 상대적인 측정값은 화면에서 절대적인 픽셀로 변환
페인트(리페인트)
DOM과 CSSOM을 통해 모든 시각적 부분을 입힌 요소들을 그려 화면에 출력

리플로우 : layout(너비, 높이) 변경 시 영향 받는 모든 node(자식, 부모)의 수치를 다시 계산하여 렌더트리를 재성성
리페인트 : reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업
수치와 상관없는 스타일 변경시에는 reflow 과정을 생략한 repaint 작업만 수행

마우스 :hover 시 3단 메뉴에 변형이 생기게 만들어보았다.