CSS3 전환 효과

CSS3전환 기능은 CSS 속성 값의 변경이 지정된 지속 시간 동안 평滑하게 발생하도록 합니다.

CSS를 이해하다3transition

CSS 속성 값이 변경될 때, 표시 결과는 즉시 업데이트됩니다. 일반적인 예시는 마우스 오버 시 버튼의 배경색 변경입니다. 일반적으로 마우스를 버튼에 올려놓으면 버튼의 배경색이 즉시 기존 속성 값에서 새 속성 값으로 변경됩니다.

CSS3새로운 전환 기능을 도입하여 시간에 따라 속성을 구체적인 값을 애니메이션화할 수 있도록 합니다.

다음 예제는 어떻게background-colorHTML 버튼에 마우스 오버 시 애니메이션.

버튼　{
　　　　배경:　#fd7c2a;
　　　　/*　Safari를 위해　3.0+　*/
　　　　-웹크리에이터-전환-property: background;
　　　　-웹크리에이터-전환-duration:　2s;
　　　　
　　　　전환-property: background;
　　　　전환-duration:　2s;
}
버튼:hover　{
　　　　배경:　#3cc16e;
}

두 가지 이상의 속성 transition을至少指定해야 합니다.-property와 transition-duration(0보다 크면), 이들이 전환 효과를 가지도록 합니다. 그러나 다른 모든전환 속성기본값이 전환 발생을 방해하지 않기 때문에 선택 사항입니다.

여러 번 전환 수행

모든 전환 속성은 여러 가치를 취할 수 있으며, 콤마로 구분하여 여러 가지 설정을 가진 여러 전환을 한 번에 정의하는 쉬운 방법을 제공합니다.

버튼　{
　　　　배경:　#fd7c2a;
　　　　border:　3px solid #dc5801;
　　　　/*　Safari를 위해　3.0+　*/
　　　　-웹크리에이터-전환-property: background, border;
　　　　-웹크리에이터-전환-duration:　1s,　2s;
　　　　
　　　　전환-property: background, border;
　　　　전환-duration:　1s,　2s;
}
버튼:hover　{
　　　　배경:　#3cc16e;
　　　　경계선-색상:　#288049;
}

전환 축약 속성

전환을 적용할 때는 많은 속성을 고려해야 합니다. 하지만, 모든 전환 속성을 한 속성에 지정하여 코드를 줄일 수도 있습니다.

전환 속성은 나열된 순서에 따라 모든 단일 전환 속성(즉, 축약 속성 transition-속성, transition-지속 시간, transition-타임링-함수와 transition-지연은 나열된 순서에 따라 설정됩니다).

이 속성을 사용할 때는 값의 순서를 반드시 지켜야 합니다.

버튼　{
　　　　배경:　#fd7c2a;
　　　　-웹크리에이터-전환:　배경　2s　ease-in　0s;　/*　Safari를 위해　3.0+　*/
　　　　전환:　배경　2s　ease-in　0s;　
}
버튼:hover　{
　　　　배경:　#3cc16e;
}

CSS3전환 속성

아래 표는 모든 전환 속성을 간단히 요약합니다：