[CSS] transition 애니메이션 부여하기

[CSS] transition

 

 

CSS에는 한 요소가 다른 값으로 변화할 때 애니메이션을 부여할 수 있는 속성인 'transition'이 존재한다.

 

 

See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.

 

일반적으로 'transition'이 적용되지 않은 모습이다.

마우스를 올렸을 때 즉각적으로 속성이 변한다.

'transition'은 애니메이션 효과를 주어서 시간에 걸쳐 부드럽게 변하도록 한다.

 

 

See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.

 

'transition'은 property name, duration, timing function, delay의 4가지 값을 가지고 각 값은 생략이 가능하다.

 

 

Property Name

 

'property name'은 애니메이션을 적용할 속성을 나타낸다.

속성 이름 대신 'all'을 사용하여 모든 속성을 나타낼 수 있다.

생략 시 기본값으로 'all'이 적용된다.

다음과 같은 형태로 각 속성에 대해 서로 다른 'transition' 값을 부여할 수 있다.

 

div {
   transition:
      background-color 1s ease-in 0.3s,
      width 2s;
}

 

'transition-property' 속성을 통해 따로 설정할 수 있다.

 

 

Duration

 

'duration'은 애니메이션의 총 시간을 나타낸다.

생략 시 기본값으로 '0s'가 적용되지만 그렇게 되면 애니메이션의 의미가 사라지기 때문에 생략하지 않는다.

'transition-duration' 속성을 통해 따로 설정할 수 있다.

 

 

Timing Function

 

'timing function'은 애니메이션의 속도를 나타낸다.

생략 시 기본값으로 'ease'가 적용된다.

'transition-timing-function' 속성을 통해 따로 설정할 수 있다.

 

See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.

 

일반적으로 위와 같은 키워드를 사용하여 'timing function'을 설정한다.

'steps', 'cubic-bezier' 함수를 사용할 수도 있다.

 

See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.

 

Delay

 

'delay'는 애니메이션을 지연하는 시간이다.

생략 시 기본값으로 '0s'가 적용된다.

'transition-delay' 속성을 통해 따로 설정할 수 있다.