Transition 사용

1186 단어 CSS3
transition은 CSS3의 속성으로 보통 애니메이션에 사용되며 시각적인 과도 효과를 일으켜 애니메이션이 웹 페이지에서 경직되지 않게 한다.transition 속성을 사용할 때는 다음과 같이 브라우저 호환성을 고려해야 합니다.
4
a
{
   color: #c52d2f;
   transition: color 3s,background-color 3s;
   /*     ,IE9     */
    -webkit-transition: color 3s,background-color 3s;//  、Safari   
    -moz-transition: color 3s,background-color 3s;//     
    -o-transition: color 3s,background-color 3s;//     
}
상기 코드는 문자 색과 배경 색의 변화를 썼다.transition 속성에는
1)transition-property: 과도 효과를 설정하는 CSS 속성의 이름, none|all|property
2)transition-duratiuon: 과도 효과를 완성하는 데 몇 초나 밀리초가 걸리고 수치가 0이면 기본적으로 과도 효과가 없습니다
3)transition-timing-function: 속도 효과의 속도 곡선,linear 고른 속도,ease 느린 속도,ease-in 느린 속도 시작,ease-in-out 느린 속도 시작과 끝
4)transition-delay: 과도 효과는 얼마나 기다려야 하는지, 수치를 추출합니다
CSS 파일의 구문 구조는 다음과 같습니다.
transition:property1 duration1 timing-func1 dalay1 , property2 duration2  timing-func2 dalay2;
 
  
 
  
 
  
 
  
 
  
 
 

좋은 웹페이지 즐겨찾기