CSS - Transition

Transition은 css의 속성에 변화를 줄 수 있다. 

효과를 적용하고자 하는 속성, 효과 지속 시간, 효과의 속도 등을 지정한다.

사용법은 다음과 같다.

<style>
	.transition {
      transition-property: width; /* 효과를 주고싶은 속성은 width */
      transition-duration: 3s; /* 효과가 모두 끝날 때까지 걸리는 시간 */
      transition-function: linear; /* 효과의 속도. linear는 일정하게 */
      transition-delay: 1s; /* 1초후에 효과를 발동하게함 */
      }
</style>

 

그렇다면 width를 어떻게 넓히냐, 가상 선택자 hover를 사용한다.

hover는 '마우스를 요소에 올렸을 때' 라는 조건을 뜻한다.

<style>
  .transition: hover { width: 500px; }
</style>

 

즉, 위의 두 코드 블럭을 합치면 클래스가 transition인 요소에 마우스를 올렸을 때,

1초 후에 width 값이 500px로, 3초 동안, 일정하게 변화된다.

 

.transition {
	transition: width 3s linear 1s;
    }
.transition: hover { width: 500px; }

동일하게 이렇게 작성 가능하다.