css3transition 속성에 대한 자세한 설명

CSS3 전환을 사용하면 서로 다른 두 CSS 스타일 간에 전환 효과를 만들 수 있습니다. 전환 속성을 사용하여 CSS 속성이 한 값에서 다른 값으로 변환되는 방법을 정의할 수 있습니다. 이 변경은 마우스 이벤트(예: hover), 버튼 누름 등에 의해 트리거될 수 있습니다.

전환 속성의 기본 사용법

CSS3에서 전환 속성은 한 CSS 스타일에서 다른 CSS 스타일로 전환하는 방법을 지정하는 데 사용됩니다. 다음은 전환 속성을 사용하는 기본 예입니다.

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s;
}
div:hover{
  width: 150px;
}

위 코드에서 div 요소 위에 마우스를 올리면 div 요소의 너비가 50px에서 150px로 전환되고 전환 효과가 2초간 지속됩니다. 초.

전환 속성의 자세한 구문

전환 속성의 구문은 다음과 같습니다.

transition: [property] [duration] [timing-function] [delay];

위치:

[property]: 전환 CSS 속성 이름은 단일 속성이거나 여러 속성일 수 있으며 쉼표로 구분됩니다.

[기간]: 전환 기간을 초(s) 또는 밀리초(ms) 단위로 지정합니다.

[timing-function]: 이즈, 선형, 이즈 인, 이즈 아웃, 이즈 인 아웃, 큐빅 베지어() 등 전환의 시간 함수를 지정합니다.

[지연]: 전환 실행이 시작되기 전의 지연 시간을 초(s) 또는 밀리초(ms) 단위로 지정합니다.

위 구문을 기반으로 전환 속성을 통해 더 복잡한 전환 효과를 정의할 수 있습니다.

전환 속성의 값

다음은 전환 속성의 선택적 값과 기본값입니다.

[property]: 높이, 너비, 배경 등 CSS 속성 이름- 색상 등

[duration]: 1s, 3.5s, 500ms 등과 같은 시간, 기본값은 0s입니다.

[timing-function]: 선형, 이즈, 이즈인 등의 시간 함수, easy-out,easy-in-out,cubic-bezier, 기본값은 easy 입니다.

[지연]: 1초, 3.5초, 500ms 등과 같은 시간, 기본값은 0초입니다.

transition-timing-function 속성

전환 타이밍 기능 속성은 전환의 시간 함수를 지정하는 데 사용됩니다. CSS 속성 값이 시작 값에서 끝 값으로 원활하게 전환되는 방식을 결정합니다. 일반적인 시간 함수는 다음과 같습니다.

linear: 일정한 속도 완화, 즉 균일한 동작

ease: 기본값. 천천히 시작하고, 중간에 빠르게 변경하고, 끝에서 다시 천천히

ease-in: 천천히 시작

ease-out: 천천히 끝

ease-in-out: 천천히 시작하고 끝

cubic-bezier: 사용자 정의 시간 기능

transition-delay attribute

전환 지연 속성은 전환 효과의 지연 시간을 지정하는 데 사용됩니다. 즉, 전환 효과가 트리거된 후 실행이 시작될 때까지 기다리는 시간입니다. 지연 값을 지정하면 트리거 후 지정된 시간만큼 지연된 후 전환 효과가 실행되기 시작합니다.

전환 속성의 예

전환 속성의 몇 가지 예는 다음과 같습니다.

전환 원점

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s;
  transform-origin: top;
}
div:hover{
  width: 150px;
  transform: rotate(45deg);
}

위 코드에서 마우스를 div 요소 위로 가져가면 div 요소의 너비가 50px에서 50px로 변환됩니다. 150px, 전환 효과는 2초간 지속됩니다. 동시에 div 요소는 상단을 기준으로 45도 회전됩니다.

다중 속성

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s;
}
div:hover{
  width: 150px;
  height: 150px;
  background-color: blue;
}

위 코드에서 div 요소 위에 마우스를 올리면 div 요소의 너비, 높이, 배경색이 동시에 변경되며 전환 효과는 2초간 지속됩니다.

사용자 지정 시간 기능

div{
  width: 50px;
  height: 50px;
  background-color: red;
  transition: width 2s cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
div:hover{
  width: 150px;
}

위 코드에서 div 요소 위에 마우스를 올리면 div 요소의 너비가 50px에서 150px로 전환되고 이 전환 효과는 2초간 지속됩니다. 동시에, 우리는 큐빅-베지어()를 사용하여 시간 함수를 사용자 정의하여 전환 효과를 더욱 개인화했습니다.

요약

CSS3 전환 효과는 매우 강력하며, 전환 속성을 통해 다양하고 복잡한 전환 효과를 정의할 수 있습니다. 전환 관련 지식을 습득함으로써 웹 페이지의 애니메이션 효과를 보다 다채로운 방식으로 디자인할 수 있습니다.

위 내용은 css3transition 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!