transition shorthand
일반적으로 property, duration, timing, delay순으로 작성
transition-property
전환 효과를 적용할 스타일을 지정할 수 있다.
/* margin-right에 전환효과를 적용한다는 뜻 */
transition-property: margin-right;
/* 콤마(,)를 통해 여러 스타일을 지정할 수 있다 */
transition-property: margin-right, color;
/* 모든 스타일 적용 */
transition-property: all;
/* 어떤 스타일도 적용 X */
transition-property: none;transition-duration
전환효과가 완료되는데 걸리는 시간을 지정할 수 있다.
단위는 s 또는 ms단위를 사용한다.
/* 지정 property가 2개 이상일 경우 */
transition-property: margin-right, color;
-------------------------------------------
/* margin-right, color는 2초의 전환효과 시간을 가진다.*/
transition-duration: 2s;
/* margin-right는 2초, color는 10초의 전환효과 시간을 가진다.*/
transition-duration: 2s, 10s;transition-delay
전환효과가 시작하기 전 대기 시간을 지정한다.
/* 지정 property가 2개 이상일 경우 */
transition-property: margin-right, color;
-------------------------------------------
/* margin-right, color는 2초동안 정지 했다 전환 효과를 시작한다.*/
transition-delay: 2s;
/* margin-right는 2초, color는 10초동안 정지 했다 전환 효과를 시작한다.*/
transition-delay: 2s, 10s;transition-timing-function
전환효과의 속도를 조절 할 수 있다.
/* 균일한 속도 */
transition-timing-function: linear;
/* 점점 빠르게 -> 끝에서 느리게 완료 */
transition-timing-function: ease;
/* 천천히 시작 -> 빠르게 완료 */
transition-timing-function: ease-in;
/* 빠르게 시작 -> 천천히 완료 */
transition-timing-function: ease-out;
/* 천천히 시작 -> 빠르게 진행 -> 천천히 완료 */
transition-timing-function: ease-in-out;