CSS3는 변환 효과를 위해 transition 속성을 사용합니다.

transition 속성의 목적은 css의 일부 속성(예를 들어background)의 부드러운 과도 효과를 나타내는 것이다.이 속성은 다음과 같은 네 가지 속성을 조합한 결합 속성입니다.

transition-property: 백그라운드와 같은 과도를 적용하는 CSS 속성을 설정합니다.

transition-duration: 과도 효과를 설정하는 데 걸리는 시간.기본값은 0입니다.

transition-timing-function: 과도 효과의 시간 곡선을 설정합니다.기본값은 ease입니다.

transition-delay: 과도 효과가 언제 시작되는지 규정한다.기본값은 0입니다.

예:
?
1
2
3
4 button{     transition: background 1 s;     -webkit-transition: background 1 s; /* Safari */ }
transition 속성을 정의할 때transition-property와transition-duration은 필수입니다. 다른 두 개는 선택할 수 있습니다.
transition-property와transition-duration css3 애니메이션
transition-property는 변환 효과를 적용할 CSS 속성을 지정합니다(완전하지 않을 수 있음).

width

height

color

background (color, image, position)

transform (in the next post)

border (color, width)

position (top, bottom, left, right )

text (size, weight, shadow, word-spacing)

margin

padding

opacity

visibility

z-index

all

transition-duration 속성은 지정한 속성의 과도 효과를 설정하는 데 시간이 걸립니다. 초(s) 또는 밀리초(ms)일 수 있습니다.
transition-delay와transition-timing-function
transition-delay는 과도 효과가 시작되는 시간을 설정합니다. 기본값은 0입니다. 초(s) 또는 밀리초(ms) css3 마우스가 지나갈 수 있습니다.만약transition-delay가 마이너스라면 과도 효과가 앞당겨 시작되는 것을 의미한다.
transition-timing-function은 다음과 같은 변환 효과를 설정합니다.

ease-시작은 느리고 중간은 빠르고 끝은 느리다

ease-in - 점입 효과, 느린 입출력

ease-out - 점차적인 효과, 빠른 입출력 느린 입출력.

ease-in-out-시작 느림과 끝 느림

cubic-bezier(n, n, n, n) - cubic-bezier 함수에서 자신의 값을 정의합니다.가능한 값은 0에서 1 사이의 값입니다

.
예:
?
1
2
3
4 button{    transition: background 1 s ease-in-out 2 s;    -webkit-transition: background 1 s ease-in-out 2 s; /* Safari */ }
다중 속성
여러 속성의 경우 각 속성의 효과는 쉼표로 구분됩니다.
?
1
2
3
4 button{     transition: background 1 s ease-in-out 2 s, width 2 s linear;     -webkit-transition: background 1 s ease-in-out 2 s, width 2 s linear; /* Safari */   }
호환성
Internet Explorer 10, Firefox, Opera 및 Chrome는 transition 속성을 지원합니다.
Safari는 대체 - webkit-transition 속성을 지원합니다.
Internet Explorer 9 이전 버전의 브라우저는 transition 속성을 지원하지 않습니다.
촉발
주의해야 할 것은 과도 효과는 이전에 이미 정의된 속성을 필요로 하고 과도 효과는 트리거를 통해 응용된다. 예를 들어 hover,:focus,and:active 등이다.
전재 대상:https://www.cnblogs.com/good10000/p/10583695.html