CSS - 전환(Transitions)

⭐ Transitions-Timing 효과 사이트

---

1. Transitions

• 한 특성 값에서 다른 값으로 변화할 때 전환으로 에니메이션 효과를 주는
  요소입니다.

1.1 Transitions 속성

속성	내용
transition-property	전환이 되는 속성을 지정한다.
transition-duration	전환의 지속시간을 결정한다. (s : 초 단위, ms : 밀리 초 단위)
transition-timing-function	전환의 효과를 정의한다.
transition-delay	전환이 시작하기 전의 대기시간을 결정한다. (s, ms)
transition	모든 트랜지션 속성을 한 번에 정의한다.

1.2 전환이 필요한 이유

• 현재 특성에서 다른 특성으로 전환될 때, Transition 요소가 적용되지 않았다면
  지체 없이 바로 전환이 되기에 부드럽지 못합니다.

• 다른 특성으로 전환되면서 발생하는 효과나 지연시간등을 개별로 설정할 수 있어
  사용자에게 시각적으로 여러가지의 전환 효과를 줄 수 있습니다.

1.3 Transition 적용

아래 코드를 위 코드펜에 붙여 넣으세요.

.circle {
    width: 300px;
    height: 300px;
    background-color: magenta;
    transition: all 2s;
    /* 트랜지션의 모든 변화를 2초에 걸쳐 전환한다.
    	사용자가 보기에 부드럽게 전환 합니다. */
}

1.4 Transition-property

• 속성의 일부분만 전환 효과를 줄 수 있습니다.

.circle {
    width: 300px;
    height: 300px;
    background-color: magenta;
    transition-property: background-color;
    transition-duration: 2s;
    /* 전환할 때, 배경색 부분만 전환되게 합니다. */
        transition: background-color *
}

1.5 Transition-duration

• 전환이 발생하는데 걸리는 시간을 조정할 수 있다.

• 속성 값을 정의하지 않으면 기본 값은 0초로 전환 효과를 볼 수 없다.

1.6 Transition-delay

• 전환이 시작되기 전 까지의 대기시간을 조정할 수 있다.

div:nth-of-type(1) {
    transition-duration: 0.5s;
}

div:nth-of-type(2) {
    transition-duration: 2s;
    transition-delay: 1s;
    /* 전환이 발생하기 전의 대기시간 1초 */
}

div:nth-of-type(3) {
    transition-duration: 3s;
    transition-delay: 2s;
    /* 전환이 발생하기 전의 대기시간 2초 */
}

1.7 Transition-timing-function

• 전환 효과의 변화 흐름, 시간에 따른 변화 속도와 같은 일종의 변화 리듬을 조정한다.

• timing-function 의 값으로 정해둔 5가지 키워드가 있다.

타입	내용
ease	기본 값, 느리게 시작해서 점점 빨라졋다가 마지막에 느려지며 종료된다.
linear	시작부터 끝까지 동일한 속도. (등속운동)
ease-in	느리게 시작해서 일정한 속도에 다다르면 등속운동을 한다.
ease-out	효과가 천천히 시작되어, 천천히 끝난다.
ease-in-out	느리게 시작해서 느려진 상태로 종료된다.

1.8 Transition (축약)

transition: property duration function delay
/* 축약해서 사용할 수 있습니다. 
transition: width 2s ease 1s
너비, 지속시간 2초, ease 타입, 대기시간 1초 */