[CSS] transition

Bam·2023년 9월 8일
0

CSS

목록 보기
33/34
post-thumbnail

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 값이 적용된 상태가 됩니다.
nonenone을 지정하면 트랜지션을 해도 아무것도 바뀌지 않습니다.
속성 이름효과를 적용할 속성을 지정합니다.

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 속성값들은 베지에 함수대신 사용하기 편하라고 생긴 베지에 함수 기반의 값들입니다.
베지에 함수에 대한 설명이 깔끔하게 잘 된 블로그가 있어서 공유합니다.


transition-delay

transition-delay 속성은 트랜지션이 시작하는 시간을 지정하는 속성입니다. 속성값으로 시간을 지정하면 해당 시간만큼 지연됐다가 트랜지션이 시작됩니다. 단위는 초(s), 밀리초(ms)를 사용합니다.

transition-delay: 시간;

transition

위 속성들을 한 번에 모아 사용할 수 있는 단축 속성입니다.

속성값에 순서는 없지만 시간 속성값을 사용하는 속성이 두 개 였었는데요. 이때는 먼저 오는 시간 속성값이 transition-duration로 지정되고 나중에 오는 시간 속성값이 transition-delay이 됩니다.

0개의 댓글