🎨 transition / transform / animation 속성 사용법

CSS 트랜지션

트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 상태 변화에 동반하여 변경되는 CSS 프로퍼티 값에 의한 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 쉽게 말하자면 요소에 마우스를 올렸을 경우, 색 혹은 크기가 변화하는 설정을 가미했는데, 뚝뚝 바로바로 변화하는 것 보단 부드럽게 전환되는 효과를 지정해 줄 때 사용한다고 보면 된다

transition은 전환되는 모션을 추가로 가미하는 속성이지 그 자체로 스타일을 주는 속성은 아니다. 그래서 :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션에 의해 발동한다. 그리고 뒤에 배울 transform 속성과 함께 사용되어지는 경우가 많이 있다.

---

Transition 속성

속성	설명
transition	모든 transition 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
transition-property	요소에 추가할 전환(transition) 효과를 설정함.
transition-duration	전환(transition) 효과가 지속될 시간을 설정함.
transition-timing-function	전환(transition) 효과의 시간당 속도를 설정함.
transition-delay	전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정함.

​

transition-property

트랜지션의 대상이 되는 CSS 프로퍼티명을 지정한다. 지정하지 않는 경우 모든 프로퍼티가 트랜지션의 대상이 된다.

복수의 프로퍼티를 지정하는 경우 쉼표(,)로 구분한다.

div {
   width: 100px;
   height: 50px;
   background-color: red;
   margin-bottom: 10px;

   transition-property: width, background-color; /* 어떤 css 프로퍼티를 transition할지 지정 */
   transition-duration: 2s, 2s; /* width와 bg-color가 2초동안 변화 */
}

div:hover { /* 마우스를 올리면 transition발동해서 적용될 상태 */
   width: 300px;
   background-color: blue;
}

See the Pen transition 1 by barzz12 (@inpaSkyrim) on CodePen.

 

 

주의해야 할 사항은 모든 CSS 프로퍼티가 트랜지션의 대상이 될 수 없다는 것이다. 예를 들어 width, font-size, background-color 등은 하나의 범주안에서 크기나 색상의 값이 변화가 가능하지만 display 프로퍼티는 그렇지 않다.

따라서 트랜지션의 대상이 될 수 있는 CSS 프로퍼티는 다음과 같다.

 

[Box model]

• width height, max-width, max-height, min-width, min-height
• padding, margin
• border-color, border-width, border-spacing

​

[Background]

• background-color, background-position

​

[좌표]

• top, left, right, bottom

​

[텍스트]

• color font-size, font-weight, letter-spacing, line-height
• text-indent, text-shadow, vertical-align, word-spacing

​

[기타]

• opacity, outline-color, outline-offset, outline-width
• visibility, z-index

 

transition-duration

트랜지션에​ 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.

프로퍼티값을 지정하지 않을 경우 기본값 0s이 적용되어 어떠한 트랜지션 효과도 볼 수 없다.

transition-duration 프로퍼티값은 transition-property 프로퍼티값과 1:1 대응한다.

div {
  transition-property: width;
  transition-duration: 2s; /* width가 2초에 걸쳐 변화 */
}

div {
  transition-property: width, opacity;
  transition-duration: 2s, 4s; /* width와 opacity가 2초 4초에 걸쳐 변화 */
}

div {
  transition-property: width, opacity, left, top;
  transition-duration: 2s, 1s; /* width, left는 2초 opacity top은 1초에 걸쳐 변화 */
}

div {
  /* shorthand syntax */
  transition: width 2s, opacity 4s; /* 축약 표현 */
}

​

transition-timing-function

트랜지션 효과의 변화 흐름, 시간에 따른 변화 속도와 같은 일종의 변화의 리듬을 지정한다.

대부분의 타이밍 함수는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있다.

transition-timing-function: ease;
transition-timing-function: linear;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;

​

transition-delay

트랜지션 발동 대기시간. 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정 한다.

transition-duration이 트랜지션 지속 시간이라면, transition-delay는 발동 대기 사간이라고 보면 된다. 그래서 프로퍼티의 값이 변화하여도 즉시 트랜지션이 실행되지 않고, 일정 시간 대기한 후 트랜지션이 실행되도록 한다.

transition-delay: 3s;

​

transition

모든 트랜지션 프로퍼티를 한번에 지정할 수 있는 shorthand이다. 값을 지정하지 않은 프로퍼티에는 기본값이 지정된다.

단, transition-duration은 반드시 지정해야 한다. 지정하지 않는 경우 기본값 0이 셋팅되어 어떠한 트랜지션도 실행되지 않는다.

transition: property duration function delay
  기본값      all      0        ease     0

/* duration */
transition: 1s

/* property duration */
transition: width 1s

/* duration function */
transition: 1s ease-in;

/* duration delay*/
transition: 1s 1s;

/* property duration function delay */
transition: width 1s ease-in 1s;

---

CSS 트랜스폼

트랜스폼(Transform)은 요소에 이동(translate), 회전(rotate), 확대/축소(scale), 비틀기(skew) 효과를 부여해준다.

단, 그 자체로 애니메이션 효과를 제공하지는 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시되어, 만일 애니메이션 효과도 같이 주고 싶다면 위에서 배운 transition과 조합하면 된다.

---

Transform 속성

 

2D Transform

기본 x, y 두 좌표로만 요소를 변화시켜 2d적인 변화를 가미할 수 있다.

transform function	설명	단위
translate(x,y)	요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다.	px, %, em 등
translateX(n)	요소의 위치를 X축으로 x만큼 이동시킨다.	px, %, em 등
translateY(n)	요소의 위치를 Y축으로 y만큼 이동시킨다.	px, %, em 등
scale(x,y)	요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 시킨다.	0과 양수
scaleX(n)	요소의 크기를 X축으로 x배 확대 또는 축소 시킨다.	0과 양수
scaleY(n)	요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다.	0과 양수
skew(x-angle,y-angle)	요소를 X축으로 x 각도만큼, Y축으로 y 각도만큼 기울인다.	+/- 각도(deg)
skewX(x-angle)	요소를 X축으로 x 각도만큼 기울인다.	+/- 각도(deg)
skewY(y-angle)	요소를 Y축으로 y 각도만큼 기울인다.	+/- 각도(deg)
rotate(angle)	요소를 angle만큼 회전시킨다.	+/- 각도(deg)

​

3D Transform

x, y, z 세 좌표를 이용해 요소를 변화시켜 3d적인 변화를 가미할 수 있다.

transform function	설명	단위
translate3d(x,y,z)	요소의 위치를 X축으로 x만큼, Y축으로 y만큼 Z축으로 z만큼 이동시킨다.	px, %, em 등
translateX(n)	요소의 위치를 X축으로 x만큼 이동시킨다.	px, %, em 등
translateY(n)	요소의 위치를 Y축으로 y만큼 이동시킨다.	px, %, em 등
translateZ(n)	요소의 위치를 Z축으로 z만큼 이동시킨다.	px, %, em 등
scale3d(x,y)	요소의 크기를 X축으로 x배, Y축으로 y배, Z축으로 z배 확대 또는 축소 시킨다.	0과 양수
scaleX(n)	요소의 크기를 X축으로 x배 확대 또는 축소 시킨다.	0과 양수
scaleY(n)	요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다.	0과 양수
scaleZ(n)	요소의 크기를 Z축으로 z배 확대 또는 축소 시킨다.	0과 양수
rotate3d(x,y,z)	요소를 X축으로 x각도, Y축으로 y각도, Z축으로 z각도 회전시킨다.	+/- 각도(deg)
rotateX(x)	요소를 X축으로 x각도 회전시킨다.	+/- 각도(deg)
rotateY(y)	요소를 Y축으로 y각도 회전시킨다.	+/- 각도(deg)
rotateZ(z)	요소를 Z축으로 z각도 회전시킨다.	+/- 각도(deg)

​

transform

변환함수를 프로퍼티값으로 쉼표없이 나열한다. 나열순서에 따라 차례대로 효과가 적용된다.

transform: func1 func2 func3 ...;

<div class="box">
	<div class="translate">translate</div>
</div>
<div class="box">
	<div class="scale">scale</div>
</div>
<div class="box">
	<div class="skew">skew</div>
</div>
<div class="box">
	<div class="rotate">rotate</div>
</div>
<div class="box">
	<div class="complex">complex</div>
</div>

.translate {
    transform: translate(10px, 50px);
}
.scale {
    transform: scale(0.75);
}
.skew {
    transform: skew(5deg, -20deg);
}
.rotate {
    transform: rotate(70deg);
}
.complex {
    transform: scale(0.5) rotate(20deg);
}

/* Animation Effect */
.translate:hover {
    transition: transform 1s linear;
    transform: translate(0px, 0px);
}
.scale:hover {
    transition: transform 1s linear;
    transform: scale(1);
}
.skew:hover {
    transition: transform 1s linear;
    transform: skew(0, 0);
}
.rotate:hover {
    transition: transform 1s linear;
    transform: rotate(0);
}
.complex:hover {
    transition: transform 1s linear;
    transform: scale(1) rotate(0);
}

See the Pen transform by barzz12 (@inpaSkyrim) on CodePen.

 

 

 

transform-origin

요소의 기본기준점을 설정할 때 사용된다. 기본 기준점은 요소의 정중앙이다 (50%,50%).

설정값으로 %, px, top left, bottom right을 사용할 수 있다. 0, 0은 top left / 100% 100%는 bottom right과 같은 값이다.

transform-origin: 0 0;
transform-origin: 50% 50%;

<div class="box">
	<div class="child box scale1">scale1</div>
</div>
<div class="box">
	<div class="child box scale2">scale2</div>
</div>
<div class="box">
	<div class="child box scale3">scale3</div>
</div>
<div class="box">
	<div class="child box translate">translate</div>
</div>

.scale1:hover {
    transition: transform 1s linear;
    transform-origin: 0 0;
    transform: scale(0.5);
}
.scale2:hover {
    transition: transform 1s linear;
    transform-origin: 50% 50%;
    transform: scale(0.5);
}
.scale3:hover {
    transition: transform 1s linear;
    transform-origin: 100% 100%;
    transform: scale(0.5);
}
.translate:hover {
    transition: transform 1s linear;
    /*transform-origin: 100% 100%;*/
    transform: translate(10px, 10px);
}

See the Pen transform-origin by barzz12 (@inpaSkyrim) on CodePen.

 

 

---

CSS 애니메이션

애니메이션(animation) 속성은 말 그대로 html 요소에 애니메이션 효과를 적용시켜 준다. 애니메이션을 적용하기 위해선 특별한 속성이 쓰여 지는데 이를 @keyframes 이라 한다. 애니메이션은 하나의 줄거리(keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다.

물론 위에서 배운 transition으로도 어느 정도의 애니메이션 효과를 표현할 수 있으나 animation보다는 좀더 인터랙티브(interactive)하게 표현이 가능한 상위 호환 정도로 봐도 된다.

둘이 비교하자면,

• 일반적으로 트랜지션 효과는 요소 프로퍼티값이 다른 값으로 변화할 때 주로 사용하며 요소의 로드와 함께 자동으로 발동되지 않는다.
• animation 프로퍼티는 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다.

---

Animation 속성

프로퍼티	설명	기본값
animation-name	@keyframes 애니메이션 이름을 지정한다
animation-duration	한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.	0s
animation-timing-function	애니메이션 효과를 위한 타이밍 함수를 지정한다.	ease
animation-delay	요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다	0s
animation-iteration-count	애니메이션 재생 횟수를 지정한다.	1
animation-direction	애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.	normal
animation-fill-mode	애니메이션 미실행 시(종료 또는 대기) 요소의 스타일을 지정한다.
animation-play-state	애니메이션 재생 상태(재생 또는 중지)를 지정한다.	running
animation	모든 애니메이션 프로퍼티를 한번에 지정한다 (shorthand syntax)

​

@keyframes

CSS 애니메이션과 트랜지션 방식의 주된 차이는 @keyframes rule에 있다.

이 rule을 사용하면 애니메이션의 흐름(sequence) 중의 여러 시점(breakpoint)에서 CSS 프로퍼티값을 지정할 수 있다.

@keyframes rule은 시간의 흐름에 따라 애니메이션을 정의한다. 여러 개의 키프레임을 정의하거나 애니메이션 중에 특정 CSS 프로퍼티에 값을 지정하는 지점을 정의할 수 있다.

@keyframes move { /* @keyframes 뒤에 애니메이션을 대표하는 임의의 이름 move를 부여 */
   from { /* 애니메이션 시작 시점 */
       left: 0;
   }
   to { /* 애니메이션 종료 시점 */
       left: 300px;
   }
}
/* from, to 키워드를 사용하여 애니메이션의 시작과 끝 시점을 정의하였다. 
   애니메이션의 시작 시점을 의미하는 from 키프레임 내에는 left 프로퍼티에 값 0을, 
   애니메이션의 끝 시점을 의미하는 to 키프레임 내에는 left 프로퍼티에 값 300px을 지정하였다. 
   그 결과, 정지 상태에서 오른쪽으로 300px 이동하는 애니메이션이 실행된다. */

div {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: red;
      
      animation-name: move; /* @keyframes에 지정한 이름을 여기다 쓴다 */
      animation-duration: 5s; /* 애니메이션 동작 시간 */
      animation-iteration-count: infinite; /* 애니메이션 재생 횟수 무한 */
}

See the Pen animation 1 by barzz12 (@inpaSkyrim) on CodePen.

 

 

 

from, to 키워드 대신 좀더 상세한 조작을 위해 퍼센티지(%)도 사용할 수 있다.

@keyframes move {
  0%   { left: 0; }
  50%  { left: 100px; }
  100% { left: 300px; }
}

​

animation-name

이름을 animation-name 프로퍼티값으로 지정하여 사용하고자 하는 @keyframes rule을 선택한다. 하나 이상의 애니메이션 이름을 지정할 수 있다.

위 예제에서 보면 @keyframes 뒤에 애니메이션을 대표하는 임의의 이름를 부여하였다. 그것을 어느 요소에 등록할지 정하는 것으로 보면 된다.

div {
	position: absolute;
	width: 100px;
	height: 100px;

	animation-name: move, fadeOut, changeColor; /* keyframe을 태그에 등록 */
	animation-duration: 5s; /* 5초동안 실행 */
	animation-iteration-count: infinite; /* a무한 반복 */
}

@keyframes move {
	from {
		left: 0;
	}
	to {
		left: 300px;
	}
}
@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes changeColor {
	from {
		background-color: red;
	}
	to {
		background-color: blue;
	}
}

See the Pen animation 2 by barzz12 (@inpaSkyrim) on CodePen.

 

 

 

animation-duration

한 싸이클의 애니메이션에 소요되는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다.

animation-duration은 반드시 지정해야 한다. 지정하지 않는 경우 기본값 0s가 셋팅되어 어떠한 애니메이션도 실행되지 않는다.

animation-duration: .5s; 
animation-duration: 500ms;

​

animation-timing-function

애니메이션 효과를 위한 수치 함수를 지정한다.

​

animation-delay

애니메이션 실행 대기 시간

animation-delay: 2s;

​

animation-iteration-count

애니메이션 주기의 재생 횟수를 지정한다. 기본값은 1이며 infinite로 무한반복 할 수 있다.

animation-iteration-count: 3;

​

animation-direction

애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정한다.

프로퍼티값	설명
normal	기본값으로 from(0%)에서 to(100%) 방향으로 진행한다.
reverse	to에서 from 방향으로 진행한다.
alternate	홀수번째는 normal로, 짝수번째는 reverse로 진행한다.
alternate-reverse	홀수번째는 reverse로, 짝수번째는 normal로 진행한다.

<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
      animation: myAnimation 5s infinite;
      /*홀수번째는 normal로, 짝수번째는 reverse로 진행*/
      animation-direction: alternate;
    }
    @keyframes myAnimation {
      0%   { background: red;    left: 0px;   top: 0px; }
      25%  { background: yellow; left: 200px; top: 0px; }
      50%  { background: blue;   left: 200px; top: 200px; }
      75%  { background: green;  left: 0px;   top: 200px; }
      100% { background: red;    left: 0px;   top: 0px; }
    }
  </style>
  </head>
  <body>
    <div></div>
  </body>

See the Pen animation 4 by barzz12 (@inpaSkyrim) on CodePen.

 

 

 

animation-fill-mode

애니메이션 미실행 시(대기 또는 종료) 요소의 스타일을 지정한다.

프로퍼티값	상태	설명
none	대기	시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
	종료	애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
forwards	대기	시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
	종료	종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
backwards	대기	시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
	종료	애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
both	대기	시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
	종료	종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.

div {
  width: 100px;
  height: 100px;
  font: bold 1em/100px san-serif;
  text-align: center;
  color: #fff;
  background: red;
  margin-bottom: 10px;
  position: relative;


  /*name duration timing-function delay iteration-count direction fill-mode play-state*/
  animation: myAnimation 2s linear 2s;
}

div:nth-of-type(1) {
  animation-fill-mode: none;
}
div:nth-of-type(2) {
  animation-fill-mode: forwards;
}
div:nth-of-type(3) {
  animation-fill-mode: backwards;
}
div:nth-of-type(4) {
  animation-fill-mode: both;
}

@keyframes myAnimation {
  0%   { left: 0px;   background: yellow; }
  100% { left: 200px; background: blue; }
}

See the Pen Untitled by barzz12 (@inpaSkyrim) on CodePen.

 

 

 

animation-play-state

애니메이션 재생 상태(재생 또는 중지)를 지정한다. 기본값은 running이다

animation-play-state: paused; 
animation-play-state: running;

​

animation

모든 애니메이션 프로퍼티를 한번에 지정한다. 값을 지정하지 않은 프로퍼티에는 기본값이 지정된다.

animation-duration은 반드시 지정해야 한다. 지정하지 않는 경우 기본값 0s가 셋팅되어 어떠한 애니메이션도 실행되지 않는다.

animation: name duration timing-function delay iteration-count direction fill-mode play-state
기본값     none    0          ease         0          1          normal     none      running

/*name duration timing-function delay */
animation: myAnimation 2s linear 2s;

---

# 참고자료

https://poiemaweb.com/css3-transition

https://poiemaweb.com/css3-animation

https://poiemaweb.com/css3-transform