[CSS] 8. 트랜지션과 애니메이션(2) - transition(트랜지션) 1

 

 

 

트랜지션(transition)이란 웹의 요소 스타일 속성이 시간에 따라 바뀌는 것을 의미합니다. 앞서 배웠던 transform에서의 단순한 형태나 속성 변화와 달리, 실제 애니메이션처럼 색상이 자연스럽게 변하거나 사각형이 원형으로 테두리 색상과 함께 변신하듯이 부드럽게 변화하는 것을 예시로 들 수 있겠네요.

 

 

 

 

○ 트랜지션의 속성들

 

기본적으로 CSS3의 트랜지션을 실행할 때는, 여러 가지 속성 값을 설정해줘야 합니다. 다음과 같이 다섯 개의 트랜지션 속성이 존재하는데, 하나씩 세부적으로 어떤 성격을 갖는 속성인지 확인해 보도록 하겠습니다. 

 

종류	설명
transition-property	트랜지션의 대상을 지정합니다.
transition-duration	트랜지션을 실행할 시간을 지정합니다.
transition-timing-function	트랜지션의 실행 형태를 지정합니다.
transition-delay	트랜지션의 지연 시간을 지정합니다.
transition	transition-property, transition-duration, transition-timing-function, transition-delay 속성을 한꺼번에 정의합니다.

 

 

---

 

 

 

(1) transition-property : 트랜지션의 대상을 지정

 

transition-property를 통해서 속성을 지정하게 됩니다. 기본 형태는 다음과 같이 사용할 수 있습니다. 

 

transition-property : all | none | <속성이름>

 

- 속성 이름 : 트랜지션 효과가 적요되는 속성을 선언합니다. 예를 들어 배경색만 적용한다든지, width와 height에 모두 적용한다거나 할 경우에 사용하게 됩니다. 

 

- all : all을 선언하거나, transition-property 속성 자체를 생략하는 경우 요소의 모든 속성에 트랜지션이 적용되는 디폴트 값입니다. 

 

- none : 트랜지션을 하는 동안 아무 속성도 바뀌지 않습니다. 

 

transition-property: all;
transition-property: background-color;
transition-property: width, height;

 

 

 

---

 

 

 

(2) transition-duration : 트랜지션의 진행 시간 지정

 

duration 지정을 통해서 해당 애니메이션이 자연스럽게 바뀌는 효과를 만들어낼 수 있습니다. 설정하는 속성 값은 시간 단위이며, second와 millisecond로 지정할 수 있습니다. 

 

트랜지션 대상이 여러가지(width, height...)이면 역시 duration도 쉼표로 구분해 복수의 시간을 지정할 수 있습니다. 또한 음숫값은 0으로 취급하게 됩니다. 

 

다음과 같은 예시를 살펴보겠습니다. 

 

<style>
    .box {
      margin:20px auto;
      width: 100px;
      height: 100px;
      background-color: #07f;
      border: 1px solid #222;
      transition-property: width, height; 
      transition-duration: 2s, 1s;
    }
    .box:hover {
      width:200px;
      height:120px;		
    }
</style>

 

 

기본적으로 박스가 있고, 이 박스에 마우스 포인터를 올리면 크기가 변화하게 됩니다. 이 때, width는 100px~200px로 변하고 height는 100px~120px로 변하는데 각각 duration은 2초, 1초로 지정되어 있습니다. 결국 세로로 먼저 커지고, 가로는 천천히 커지는 형태가 됩니다.