CSS에 다중 전환 속성 정의

Question

transition-property을 all으로 설정하면 width 및 height 속성도 전환되기 때문에 브라우저 창을 확대/축소 할 때 불량합니다. 난 단지 background 및 color을 할 때, 나는 비록, 그것을 멀티 라인을 정의 할 필요가있다 : 나는 또한 -webkit-, -moz 및 -o-을 위해 그것을하기 때문에

transition-property: color, background; 
transition-duration: 250ms; 

이 나쁜 것입니다. 대신 다음과 같은 것을 찾고 있습니다.

transition: [color and background] 250ms; 

구문은 무엇입니까?

Answer 1

다수의 전환과 transition 속기를 사용하여, 당신은 쉼표로 값을 각 그룹의 각 속성에 대한 전환 기간을 반복하고 분리해야합니다

접두사와

transition: color 250ms, background 250ms; 

, 그것은 다음과 같습니다

-moz-transition: color 250ms, background 250ms; 
-o-transition: color 250ms, background 250ms; 
-webkit-transition: color 250ms, background 250ms; 
transition: color 250ms, background 250ms; 

그래도 조금 반복되지만 적어도 모든 접두어에 대해 transition-property과 을 반복합니다.

약식 구문은 spec에 설명되어 있습니다.