CSS3의 새로운 전환 속성 소개(예제 포함)

이 글은 CSS3의 새로운 전환 속성(예제 포함)을 소개합니다. 이는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS3에 새로운 모듈 전환이 추가되었습니다. 이 전환은 몇 가지 간단한 CSS 이벤트를 통해 요소의 모양 변경을 트리거하여 효과를 더욱 섬세하게 만들 수 있습니다.
주로 다음 하위 속성을 포함하는 복합 속성입니다.

transition-property: 전환 또는 동적 시뮬레이션의 CSS 속성 지정
transition-duration: 전환을 완료하는 데 필요한 시간 지정
transition-timing-function: 전환 기능 지정
transition-delay: 시작 지연 시간 지정 나타남

예:

transition: background-color .5s ease .1s;

특별 참고 사항: "transition-property" 속성이 모두로 설정되면 모든 중간점 값의 속성을 나타냅니다.

예:

width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: width;
  transition-property: width;
  -webkit-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: .18s;
  transition-delay:.18s;

개별 속성을 설정하는 것도 가능합니다.

관련 권장사항:

CSS3 전환 속성_html/css_WEB-ITnose

CSS3_CSS/HTML

전환 속성에 대한 자세한 설명 및 예시 공유

위 내용은 CSS3의 새로운 전환 속성 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!