Portfolio

transform : rotate, scale 등

transition-property

transition-duration

transition-delay

Index

Index 1. Transition 1.1 Transition이란?1.2 Transition의 속성들 1.2.1 transition - delay 1.2.2 transition - duration 1.2.3 transition - property 1.2.4 transition - timing - function 1.2.5 transition 2. transform transform 이란?2.1 scale 2.2 rotate 2.3 translate 2.4 skew 2.5 transform-origin 3. translate VS position 3.1 웹페이지 렌더링 1. 파싱 2. 스타일 계산 3. 레이아웃 4. 페인트 5. 컴포지팅 3.2 page reflow & repaint

1. Transition

1.1 Transition이란?

이번 장에서는 transition에 대해서 알아보도록 하겠습니다. transition이란 CSS 속성값이 변할 때, 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것을 말합니다. 여러 속성들은 차근차근 살펴보도록 하고 가벼운 예제를 통해 transition이 무엇인지 경험해 보도록 하죠.


<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: red;
    }
    div:hover{
      width: 300px;
      height: 300px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div>hello world</div>
</body>
</html>

가로, 세로 100px에 빨강 배경색을 가진 div가 하나 있습니다. div에 마우스를 옮기게 되면 가로, 세로 300px에 파랑 배경색을 가진 div로 변하게 되는 걸 확인할 수 있습니다.

여기서 style에 코드 한 줄만 추가해볼까요? 지금은 이 코드가 무엇을 의미하는지 모르셔도 됩니다.


transition: all 2s;

그 결과,

즉시 변경되면 속성값들이 시간을 두고 천천히 바뀌는 걸 확인할 수 있습니다. 애니메이션처럼 말이죠. 이것이 바로 transition의 마법입니다. transition에 대해 함께 더 알아보도록 합시다.

1.2 Transition의 속성들

1.2.1 transition - delay

delay란? delay가 무슨 뜻인가요? 맞습니다. 한국어로 번역하면 '지연'이라는 뜻입니다. 말 그대로 transition 이 일어날 때 얼마만큼 기다렸다가 실행할지 결정해주는 속성입니다.

delay의 값 delay는 transition이 일어나기 전까지 얼마나 기다릴지 지정해 주는 것입니다. 그렇기 때문에 속성값으로는 시간이 들어가게 됩니다. 초 단위를 나타내는 s나 밀리 초를 나타내는 ms로 나타냅니다. 지정해 주지 않을 시에는 0s을 의미하며 지연 없이 바로 transition이 일어납니다.

delay의 값으로 음수 값도 지정해줄 수 있나요?

의외로 음수값으로 지정이 가능합니다. 음수값을 지정할 경우에는 지연 없이 바로 transition이 실행되며 지정해준 음수값의 절대값 시간만큼 기다렸다가 시작하게 됩니다.

delay 예시 마우스를 올렸을 때 배경을 바꿔주는 예제입니다. 세 개의 div에 대해서 delay 값을 다르게 지정해주었습니다. 차이를 직접 확인해 보도록 합시다.


<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
    body{
        display: flex;
    }
    div{
      width: 100px;
      height: 100px;
      background: red;
      font: bold;
      color: white;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .first{
        transition-delay: 0s;
    }
    .second{
        transition-delay: 1s;
    }
    .third{
        transition-delay: 2s;
    }
    div:hover{
        background: blue;
    }
  </style>
</head>
<body>
  <div class="first">0초</div>
  <div class="second">1초</div>
  <div class="third">2초</div>
  
</body>
</html>

1.2.2 transition - duration

duration 이란? 이번에도 뜻을 알아볼까요? duration은 한국어로 '지속'이라는 뜻입니다. transition이 일어나는 지속시간을 설정해 줄 수 있습니다. 위에서 delay만 사용하였을 경우에는 지연시간 후에 CSS 속성값이 갑자기 확 변해 애니메이션과 같은 효과를 가져올 수 없었습니다. duration을 사용한 후 변화를 알아보도록 합시다.

duration의 값 transition이 얼마만큼의 시간 동안 변할지 지정해 주어야 합니다. 그렇게 때문에 delay와 유사하게 시간을 속성값으로 갖습니다. 초 단위를 나타내는 s 나 밀리 초를 나타내는 ms로서 나타냅니다. 지정해 주지 않을 시에는 0s를 의미하며 transition의 효과가 나타나지 않습니다.

duration 예시 마찬가지로 마우스를 올렸을 때 배경을 바꿔주는 예시입니다. duration값에 따라서 서서히 효과가 나타나는 것을 확인할 수 있습니다.


<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
    body{
        display: flex;
    }
    div{
      width: 100px;
      height: 100px;
      background: red;
      font: bold;
      color: white;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .first{
        transition-duration: 0s;
    }
    .second{
        transition-duration: 1s;
    }
    .third{
        transition-duration: 2s;
    }
    div:hover{
        background: blue;
    }
  </style>
</head>
<body>
  <div class="first">0초</div>
  <div class="second">1초</div>
  <div class="third">2초</div>
</body>
</html>

1.2.3 transition - property

property란? property란 한국어로 '속성'이라는 뜻입니다. 따라서 transition-property란 어떤 속성에 transition효과를 줄지 설정하는 것을 말합니다. transition-property를 통해 더 화려한 애니메이션 효과를 줄 수 있겠죠?

property의 값 속성값으로는 all, none, property, initial, inherit이 있습니다. all은 기본값으로 모든 속성에 transition효과가 나타나게 하는 것입니다. none은 속성들이 transition효과를 받지 못하는 것입니다. property는 transition효과를 적용하고 싶은 css 속성을 설정하면 지정된 속성에 transition이 나타납니다. 하나 이상의 속성에 적용하고 싶을 때는 쉼표로 나열합니다. initial은 속성의 기본값으로 설정해주는 것입니다. inherit은 부모 요소의 속성값을 상속받습니다.

property 예제 (간단하게 all, none, property에 해당하는 예제를 알아봅시다.)

all예제


<!DOCTYPE html>
<html>
<head>
	<title>transition-property all예제</title>
	<style>
		div {
			width: 100px;
			height: 100px;
			background-color: red;
			-webkit-transition-property: all; /* safari */
			-webkit-transition-duration: 2s; /* safari */
			transition-property: all;
			transition-duration: 2s;
			text-align: center;
			color: white;
			font-size: 20px;
			font-weight: bold;
			line-height: 100px;
		}

		div:hover {
			background-color: blue;
			width: 200px;
			height: 200px;
			line-height: 200px;
		}
	</style>
</head>
<body>
	<div>all</div>
</body>
</html>

none예제


<!DOCTYPE html>
    <html>
    <head>
    	<title>transition-property none예제</title>
    	<style>
    		div {
    			width: 100px;
    			height: 100px;
    			background-color: red;
    			-webkit-transition-property: none; /* safari */
    			-webkit-transition-duration: 2s; /* safari */
    			transition-property: none;
    			transition-duration: 2s;
    			text-align: center;
    			color: white;
    			font-size: 20px;
    			font-weight: bold;
    			line-height: 100px;
    		}
    
    		div:hover {
    			background-color: blue;
    			width: 200px;
    			height: 200px;
    			line-height: 200px;
    		}
    	</style>
    </head>
    <body>
    	<div>all</div>
    </body>
    </html>

transition-property: all일때는 2초 동안 서서히 변하는 것이 transition-duration: 2s를 줬음에도 불구하고 갑자기 변하는 것을 보실 수 있습니다. transition-property: none을 주면 다른 transition들을 무시하는 거죠.

property예제


<!DOCTYPE html>
<html>
<head>
	<title>transition-property property예제</title>
	<style>
		div {
		  width: 100px;
		  height: 100px;
		  background-color: red;
		  -webkit-transition-property: width, height; /* Safari */
		  -webkit-transition-duration: 2s; /* Safari */
		  transition-property: width, height;
		  transition-duration: 2s;
		}

		div:hover {
		  width: 200px;
		  height: 200px;
		  background-color: blue;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

transition-property: width, height만 줬으니 background-color속성은 transition-duration: 2s효과를 받지 못합니다. 따라서 width, heigth는 2초동안 100px에서 200px로 서서히 변하지만 background-color은 급격하게 blue로 바뀝니다.

1.2.4 transition - timing - function

timing-function 이란? transition-timing-function으로 transition의 진행 속도를 설정할 수 있습니다. transition-timing-function은 IE의 경우, 버전 10부터 사용 가능합니다.

timing-function의 값 속성값으로는 ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int, start|end), cubic-bezier(n, n, n, n), initial, inherit이 있습니다. 대부분의 timing 함수들은 cubic bezier이라는 것을 사용합니다. cubic bezier곡선이란 부드러운 곡선을 모델링 하기 위해 컴퓨터 그래픽에서 널리 쓰이는 것으로 4개의 컨트롤 포인트를 사용해 transition의 시작과 끝까지의 효과를 제어합니다. 1) ease의 경우, 기본값으로 transition이 천천히 시작되어 그 다음에는 빨라지고 마지막에는 다시 느려집니다. cubic-bezier(0.25, 0.1, 0.25, 0.1)과 같습니다. 2) linear은 transition이 처음부터 끝까지 일정한 속도로 진행됩니다. cubic-bezier(0, 0, 1, 1)과 같습니다. 3) ease-in은 천천히 시작하는 것으로 cubic-bezier(0.42, 0, 1, 1)과 같습니다. 4) ease-out은 천천히 끝나는 것이고 cubic-bezier(0, 0, 0.58, 1)과 같습니다. 5) ease-in-out은 천천히 시작해서 천천히 끝나는 것이고 cubic-bezier(0.42, 0, 0.58, 1)과 같습니다. 6) step-start은 steps(1, start)과 같으며 시작하는 시점에 스텝을 끊어줍니다. 7) step-end은 steps(1, end)와 같으며 끝나는 시점에 스텝을 끊어줍니다. 8) steps(int, start|end)은 int 자리에 정수를 넣고 start나 end를 넣어주면 넣어준 정수만큼 시작이나 끝나는 시점에 스텝을 끊어줍니다. 9) cubic-bezier(n, n, n, n)를 사용해 베지어 곡선에 원하는 컨트롤 포인트를 직접 넣어줄 수도 있습니다. 10) initial은 속성의 기본값으로 적용됩니다. 11) inherit은 부모의 영향을 받아 적용됩니다.

timing-function 예제

움직임을 보여주는 예제이므로 codepen링크를 첨부하였습니다.

👉🏻 https://codepen.io/yunjipark0623/pen/zYOBjJd?editors=1100

1.2.5 transition

transition 속성을 사용해 여태까지 배워본 transition 속성들을 한번에 적용시킬 수 있습니다.

transition 은 transition-property transition-duration transition-timing-function transition-delay 로 이루어져 있으며 예제로 추가시킨 그림을 해석해보면 width 속성을 2초 동안 처음부터 끝까지 일정한 속도로 1초 지연시킨 뒤에 transition 효과가 일어나는 것을 의미합니다. 앞에서 transition의 속성들에 대해서 배웠으니 해당하는 위치에 알맞은 value들을 넣을 수 있을 것입니다.

2. transform

transform 이란?

transform(변형)은 Object를 여러 형태로 변형할 때 사용하는 속성으로, transition과 함께 사용하면 엄청난 효과를 낼 수 있는 속성입니다. transform은 형태를 변형시킬 수 있는 다양한 속성들이 존재합니다. 그 중 가장 많이 사용하는 scale, rotate, translate, skew , origin을 알아보겠습니다.

2.1 scale


<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
		.box{
			width:100px;
			height:100px;
			background:dodgerblue;
			transition:all 1s;
		}
		
		.box:hover{
			transform: scale(2);
		}

  </style>
</head>
<body>
  <div class="box">hello world</div>
</body>
</html>

scale은 형태의 크기를 변환 시킬 때 사용하는 속성으로 마치 위에 예시에서 width와 height의 크기를 늘린 것처럼 변형이 되지만 width와 height를 늘렸을 경우엔 오른쪽 아래가 커지는 반면에 scale은 중심점이 가운데이기 때문에 가운데를 중심으로 커지는 효과를 나타냅니다. scale(1)에서 1 = 100%를 뜻하며 1 이상의 값을 입력해야 변형이 일어나게 됩니다. 코드에서는 scale(2)를 입력했기 때문에 지금보다 2배의 크기만큼 커진 모습이 출력됩니다. scale의 값에는 2가지 인자를 받을 수 있습니다. (x축, y축)으로 설정 가능하며 한 개의 인자값만 입력할 경우 x, y동일한 수치를 뜻합니다. transition을 함께 사용했기 때문에 자연스러운 화면 전환 효과를 함께 확인할 수 있습니다.

2.2 rotate


<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
		.box{
			width:100px;
			height:100px;
			background:dodgerblue;
			transition:all 1s;
		}
		
		.box:hover{
			transform:rotate(360deg);
		}

  </style>
</head>
<body>
  <div class="box">hello world</div>
</body>
</html>

rotate는 회전을 시켜주는 값입니다. 괄호 안에 각도를 입력하면 입력값만큼 회전을 하며, 사용 단위는 deg(degree)를 사용합니다. 360deg 한 바퀴를 뜻하기에 transform:rotate(1turn)으로도 사용이 가능합니다.

2.3 translate


<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
		.box{
			width:100px;
			height:100px;
			background:dodgerblue;
			transition:all 1s;
		}
		
		.box:hover{
			transform:translate(100px,100px);
		}

  </style>
</head>
<body>
  <div class="box">hello world</div>
</body>
</html>

translate(옮기다) 는 Object를 x,y축 지점으로 이동을 시켜주는 값으로 (x축, y축)을 뜻합니다. 기준점은 가운데이며 값이 증가할 시 x축은 오른쪽으로 y축은 아래 방향으로 이동합니다. 음수 값을 적용 시 반대 방향으로 이동합니다.

2.4 skew


<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
		.box{
			width:100px;
			height:100px;
			background:dodgerblue;
			transition:all 1s;
		}
		
		.box:hover{
			transform:skew(40deg);
		}

  </style>
</head>
<body>
  <div class="box">hello world</div>
</body>
</html>

skew(외곡하다) 는 상자를 비틀기 또는 외곡을 주어 형태를 변형시키는 속성입니다. 값은 rotate와 동일하게 (40deg)각도로 표시하며 deg(dgree)단위를 사용합니다.

2.5 transform-origin


<!DOCTYPE html>
<html>
<head>
  <title>Transition Test</title>
  <style>
		.box{
			width:100px;
			height:100px;
			background:dodgerblue;
			transition:all 1s;
			transform-origin:left top;
		}
		.box:hover{
			transform:rotate(360deg);
		}

  </style>
</head>
<body>
  <div class="box">hello world</div>
</body>
</html>

transform-origin속성은 transform되는 Object의 기준점을 변경할 때 사용됩니다. defult값은 가운데이지만 transform-origin을 사용하여 왼쪽 위로 기준점을 변경하자 rotate되는 위치가 왼쪽 위부터 시작하는 모션으로 변경이 됩니다. left, right, top, bottom, center 문자를 이용해 위치를 설정할 수 있지만 숫자값을 입력해도 기준점을 설정할 수 있습니다. transform-origin:0, 0; 앞에 인자는 x축 = 0, 뒤에 인자는 y축 = 0으로 표시합니다.

transition은 전환, transform은 변형, 이 두 가지를 적절히 잘 활용하면 적은 코드양으로 웹사이트에서 Awesome한 효과를 낼 수 있습니다.

3. translate VS position

앞서 우리는 position 속성을 통해 원하는 좌표로 요소를 움직일 수 있었습니다. 그렇다면 translate 는 중복되는 기능일까요?? 그렇다면 우리는 언제 position을 사용하고 translate 를 사용해야 할까요??

3.1 웹페이지 렌더링

브라우저가 html 파일을 화면에 그려내는 과정을 잠시 살펴보도록 합시다.

1. 파싱

브라우저는 우선 html 파일을 DOM으로 변환(파싱)합니다.

2. 스타일 계산

CSS 역시 파싱하여 CSSOM으로 변환합니다.

3. 레이아웃

CSSOM 정보를 토대로 레이아웃 트리(렌더 트리)를 생성합니다.

4. 페인트

레이아웃 트리(렌더 트리)가 생성되면 이 트리를 따라 페인트 기록이 생성됩니다

5. 컴포지팅

각각의 레이어를 스크린에 픽셀로 표현하고 (레스터링) 나누었던 레이어들을 합성해 페이지를 그립니다. 이를 컴포지팅이라고 합니다.

3.2 page reflow & repaint

브라우저는 html 구조상의 변화 혹은 스타일의 변화가 있을 때 reflow, repaint 라는 과정을 거치게 됩니다.

reflow : 레이아웃(너비, 높이 등) 변경 시 영향 받는 모든 노드(자식, 부모)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업입니다. (렌더 트리 : 브라우저가 html을 분석하여 트리형태의 구조로 재해석한 것)

repaint : reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업으로 수치와 상관없는 스타일 변경시에는 reflow 과정을 생략한 repaint 작업만 수행합니다.

만약 css를 통해 레이아웃이 바뀌는 애니메이션을 구현할 경우 브라우저는 매 프레임마다 reflow, repaint 과정을 수행해야합니다. 때문에 reflow, repaint 현상은 브라우저에 상당한 부담이 됩니다.

이때 브라우저의 부담을 덜기 위해서 GPU(graphic processing unit)를 이용한 그래픽 가속능력을 사용할 수 있는데 이러한 능력을 지원하는 css 속성이 바로 transform 입니다.

** 결론 : 정적인 사이트에서 요소의 위치를 단순 배치하는것은 position을 사용해도 괜찮지만, 애니메이션이나 혹은 동적으로 요소의 위치를 이동해야 하는 경우 translate 속성을 사용하는 것이 성능에 좋습니다. **

14. CSS transition, transform