[CSS] transition

Bam·2023년 9월 8일

CSS transition 스타일 트랜지션

CSS

목록 보기

33/35

transition

이전에 배운 transform은 요소를 이동시키거나 회전시키는 동작을 했습니다. 이번에 다룰 transition은 요소를 웹 요소의 속성을 동작에따라 변경시키는 효과를 낼 수 있습니다.

그러면 트랜지션을 사용하기 위한 속성들에 대해 알아보도록 하겠습니다.

trasnition 속성

실습에 사용된 코드입니다.

<body>
  <div class="box">box</div>
</body>

.box {
  width: 50px;
  height: 50px;
  background-color: #55aaff;
}

transition-property

transition-property 속성은 트랜지션을 적용할 대상을 선택하는 속성입니다.

transition-propery: 속성값;

속성값으로는 all, none, 속성 이름이 올 수 있습니다.

속성값	설명
all	기본값. 모든 요소의 모든 속성이 트랜지션의 대상이 됩니다. 만약 `transition-property` 속성을 생략할 경우 자동적으로 all 값이 적용된 상태가 됩니다.
none	`none`을 지정하면 트랜지션을 해도 아무것도 바뀌지 않습니다.
속성 이름	효과를 적용할 속성을 지정합니다.

transition-duration

transition-duration은 트랜지션의 진행시간을 지정하는 속성입니다.

transition-duration: 시간;

속성값으로는 시간을 지정하는데, 초(s)와 밀리초(ms) 단위로 값을 지정할 수 있습니다.

다음 예제 코드는 2초간 box의 테두리가 둥글어지고 색이 어두워지는 예제 코드입니다.

.box {
  width: 50px;
  height: 50px;
  background-color: #55aaff;
  transition-duration: 2s;
}

.box:hover {
  border-radius: 25%;
  background-color: #2288cc;
}

transition-timing-function

transition-timing-function은 트랜지션은 트랜지션 효과의 진행 속도를 조정할 수 있는 속성입니다.

transition-timing-function: 속성값;

다양한 속성값들을 통해 효과의 시작이나 끝, 중간 부분의 속도를 조정할 수 있습니다.

속성값	설명
linear	처음부터 끝까지 동일 속도로 진행됩니다.
ease	처음엔 천천히 시작하다가 중간에선 빨라지고 마지막은 다시 천천히 진행됩니다.
ease-in	천천히 시작합니다.
ease-out	천천히 끝납니다.
ease-in-out	천천히 시작하고 천천히 끝납니다. 중간에 빨라지지 않습니다.
cubic-bezier(n0, n1, n2, n3)	베지에 곡선을 정의하는 큐빅 베지에 함수를 이용해서 속도를 조절합니다.

큐빅 베지에 함수같은 경우 컴퓨터 그래픽스에서 사용되는 곡선 그리기의 개념입니다. ease, ease-in/out/in-out 속성값들은 베지에 함수대신 사용하기 편하라고 생긴 베지에 함수 기반의 값들입니다.
베지에 함수에 대한 설명이 깔끔하게 잘 된 블로그가 있어서 공유합니다.