transition

transition

정해진 시간 동안 요소의 속성값을 부드럽게 변화시킵니다.

div {
    transition: all 1s;
}

transition-tiing-function

전환효과의 시간당 속도를 설정합니다.

• linear : 전환효과가 처음부터 끝까지 일정한 속도로 진행됩니다.
• ease: 기본값. 전환효과가 천천히 시작되어 그다음은 빨라지고 마지막에는 느려집니다.
• ease-in :전환효과가 천천히 시작됩니다.
• ease-out : 전환효과가 천천히 끝납니다.
• ease-in-out : 효과가 천천히 시작되어, 천천히 끝납니다.
• cubic-bezier(n,n,n,n) : 전환효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다.cubic-bezier.

div {
    transition: all 1s;
    transition-tiing-function: ease-in-out;
}

transition-delay

전환효과가 나타나기 전까지의 지연시간을 설정합니다.
설정된 시간이 흐른 뒤에야 시작됩니다.

div {
    transition: all 1s;
    transition-delay: 2s;
}

 

// transition과 transform 효과의 동시 적용
div {
    transition: all 1s;
}

div:hover {
    transform: rotateY(180deg);
}