[HTML & CSS] transform과 animation 이용하기

→  좌표 이동하고 싶을 때 

 

transform: translateX(100px);
transform: translateY(100px);

 

● X축의 방향으로 100px 만큼 이동

 

● margin을 쓰면 되지 않느냐? → 동적인 animation을 할 때에는 translate가 더 부드럽다! (성능이 좋다)

 

※ 상식적으로 알아야 할 transform 변경보다 margin 변경이 느린 이유

웹 브라우저는 HTML CSS코드를 그래픽으로 바꿔주는 간단한 프로그램이다. 

 

브라우저가 그림 그리는 순서

1. Render Tree (CSS를 정리한 참고자료) 만들기

2. Layout 잡기

3. Paint 하기

4. Composite(transform 등) 처리

 

느린이유 1. 마지막 순서에 transform이 있어 훨신 빠르게 작용할 수 있다. 

느린이유 2. transform은 다른 쓰레드에서 처리를 해준다. 

-> 웹브라우저는 쓰레드 1개만 사용,  (아직 이해가 잘 안돼서 추가예정)

자바스크립트 실행, HTML CSS처리, 전부 한 곳에서 한다. 

 

 

 

→  크기 변화를 주고 싶을 때

 

transform: scale(1.2)

 

→ 복잡한 애니메이션 정의 

기본 구조는 다음과 같다. 

 

@keyframes 작명 {

}

 

다음은 예시문입니다. 

 

@keyframes 좌표이동 {
	0% {
    transform: translateX(0px);
    // 0% 일 때 x축으로 0px 만큼 이동
    }
	50% {
    transform: translateX(-100px);
    // 50% 일 때 x축으로 -100px 만큼 이동
    }
    100% {
    transform: translateX(100px);
    // 100% 일 때 x축으로 100px 만큼 이동
    }
}

* 상대적인 위치가 아닌 절대적인 좌표값으로 이동함 *

 

animation-delay: 딜레이양

animation-iteration-count: 반복횟수