[CSS] 프로퍼티 변화를 일정시간에 걸쳐 일어나도록 transition

트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 

 

<style>
    div {
      width: 100px;
      height: 100px;
      background: #000000;
    }
    div:hover {
      border-radius: 50%;
      background: #FFFFFF;
      transition:2s;
    }
  </style>

위의 예에서, 100px 짜리 검정색 사각형에 마우스 커서를 올리면 1초에 걸쳐 모양이 변하고, 색상도 흰색으로 점진적으로 변경된다. 

 

※ 원리를 이해하면 다양한 애니메이션 효과를 줄 수 있다.