[컴] css transition effect

 

animation / 효과 / 애니메이션 효과 / css 애니메이션 / fadein fadeout / howto

css transition effect

다음 link 에 잘 정리되어 있다. 여기서는 간략하게 기억하기 위한 용도의 정리이다. 자세한 내용은 다음 link 를 참고하자.

• Using CSS transitions - CSS: Cascading Style Sheets | MDN

transition effect 는 처음상태(initial state) 에서 다른 상태(final state) 로 변경될 때, 그 사이의 값을 자동으로 계산해서 부드럽게 transition 이 변하도록 보여주는 것이다. 쉽게 상태가 변할 때 자동으로 animation 을 넣어주는 방법이라고 보면 된다.

예제

아래와 같은 css 가 있다면, “font-size 가 현재값에서 다른 값으로 변할 때 transition effect 를 넣어라” 라는 뜻이다.

#test {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

transition 속성

transiton-property 에서 정한 속성의 값이 변하면, 그것에 대해서 transition effect 을 넣어라 라는 뜻으로 보면 된다.

transition effect 를 넣고 싶다면 다음 4가지를 정하면 된다.

1. 어떤 속성이 변할 때 transition effect 가 발생할 지 정한다. : transiton-property
2. transition effect 을 보여주는 시간을 얼마로 할 것인가. : transition-duration
3. transition effect 를 위해서 필요한 값들(intermediate values)을 계산할 때 어떤 함수를 사용할 것인가. : transition-timing-function
   • 예를 들면, 일정한 속도로 움직일 수도 있고, 처음엔 느리게 움직이다가 점차 빨라질 수도 있다.
4. transition effect 가 시작하기 전에 얼마간 delay 를 줄 것인가. : transition-delay

transition: <property> <duration> <timing-function> <delay>;

주의할 점

from : - Using CSS transitions - CSS: Cascading Style Sheets | MDN

appendChild() 시점과 display:none 을 하는 시점은 항상 final state 이다. 그래서 transition effect 가 동작하지 않는다. 그래서 이 상황에서 transition effect 를 넣고 싶다면 setTimeout() 을 써야 한다.

See Also

1. 쿠...sal: [컴][웹] HTML5 효과들