이전에 배운 transform은 요소를 이동시키거나 회전시키는 동작을 했습니다. 이번에 다룰 transition
은 요소를 웹 요소의 속성을 동작에따라 변경시키는 효과를 낼 수 있습니다.
그러면 트랜지션을 사용하기 위한 속성들에 대해 알아보도록 하겠습니다.
실습에 사용된 코드입니다.
<body> <div class="box">box</div> </body>
.box { width: 50px; height: 50px; background-color: #55aaff; }
transition-property
속성은 트랜지션을 적용할 대상을 선택하는 속성입니다.
transition-propery: 속성값;
속성값으로는 all, none, 속성 이름
이 올 수 있습니다.
속성값 | 설명 |
---|---|
all | 기본값. 모든 요소의 모든 속성이 트랜지션의 대상이 됩니다. 만약 transition-property 속성을 생략할 경우 자동적으로 all 값이 적용된 상태가 됩니다. |
none | none 을 지정하면 트랜지션을 해도 아무것도 바뀌지 않습니다. |
속성 이름 | 효과를 적용할 속성을 지정합니다. |
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: 속성값;
다양한 속성값들을 통해 효과의 시작이나 끝, 중간 부분의 속도를 조정할 수 있습니다.
속성값 | 설명 |
---|---|
linear | 처음부터 끝까지 동일 속도로 진행됩니다. |
ease | 처음엔 천천히 시작하다가 중간에선 빨라지고 마지막은 다시 천천히 진행됩니다. |
ease-in | 천천히 시작합니다. |
ease-out | 천천히 끝납니다. |
ease-in-out | 천천히 시작하고 천천히 끝납니다. 중간에 빨라지지 않습니다. |
cubic-bezier(n0, n1, n2, n3) | 베지에 곡선을 정의하는 큐빅 베지에 함수를 이용해서 속도를 조절합니다. |
큐빅 베지에 함수같은 경우 컴퓨터 그래픽스에서 사용되는 곡선 그리기의 개념입니다.
ease, ease-in/out/in-out
속성값들은 베지에 함수대신 사용하기 편하라고 생긴 베지에 함수 기반의 값들입니다.
베지에 함수에 대한 설명이 깔끔하게 잘 된 블로그가 있어서 공유합니다.
transition-delay
속성은 트랜지션이 시작하는 시간을 지정하는 속성입니다. 속성값으로 시간을 지정하면 해당 시간만큼 지연됐다가 트랜지션이 시작됩니다. 단위는 초(s), 밀리초(ms)를 사용합니다.
transition-delay: 시간;
위 속성들을 한 번에 모아 사용할 수 있는 단축 속성입니다.
속성값에 순서는 없지만 시간
속성값을 사용하는 속성이 두 개 였었는데요. 이때는 먼저 오는 시간 속성값이 transition-duration
로 지정되고 나중에 오는 시간 속성값이 transition-delay
이 됩니다.