트랜지션

트랜지션 (Transitions) (IE10+)

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다.

트랜지션 속성은 IE10 이상 지원한다.

transition-property 트랜지션 속성

all(기본값), none

transition-duration 트랜지션 시간

변화가 일어나는 기간(1.2s, 4s), 초단위, (기본값 0s)

transition-timing-function 트랜지션 타이밍 함수

트렌지션 효과가 진행하는 동안 속도의 변화를 지정한다.

• ease : 기본값, 천천히 시작해서, 빠르게 진행하며, 천천히 끝남.

  • cubic-bezier(0.25,0.1,0.25,1)

• linear : 처음과 끝이 같은 속도로 나타남

  • cubic-bezier(0,0,1,1)

• ease-in : 천천히 시작

  • cubic-bezier(0.42,0,1,1)

• ease-out : 천천히 끝남

  • cubic-bezier(0,0,0.58,1)

• ease-in-out : 천천히 시작해서 천천히 끝남

  • cubic-bezier(0.42,0,0.58,1)

• cubic-bezier(n,n,n,n) : 직접 값을 지정할 수 있음. 가능한 값은 0부터 1까지 숫자값

/* 임의 값 */
transition-timing-function: cubic-bezier(0.085, 1.35, 0.93, -0.565);

/* CSS 기본 설정 가능한 값 */
transition-timing-function: linear;

transition-delay 트랜지션 지연시간

• 트랜지션 효과가 시작되기 전 기다리는 시간

transition 트랜지션 속기형

transition: <prop> <dur> <timfn> <delay>

.headline {
  transition: top 0.4s ease, transform 0.6s ease-in-out 0.4s;

  /* 또는 */
  transition: all 0.4s ease-out 0.32s;
}

예시

.headline {
  /* 초기 상태(initial state) */
  position: absolute;
  top: 100px;
  left: 40%;
  margin-left: -156px;
  transition-property: top, transform; /*또는 all*/
  transition-duration: 0.45s 0.8s;
  transition-timing-function: linear;
  transition-delay: 0.4s, 0.4s;
}

.headline:hover {
  /* 종료 상태 (final state) */
  top: 100px;
  transform: rotate(10deg);
}

참고

• CSS 트랜지션 사용하기

• codepen 트랜지션 실습

• 트랜지션 문법

• easings.net

• Ceaser - CSS EASING ANIMATION TOOL

• CSS Transition (실습 완료) by codepen