배경 위치를 제외한 모든 속성에 CSS 전환을 적용하고 싶습니다. 나는 이렇게하려고했다.
.csstransitions a {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.csstransitions a {
-webkit-transition: background-position 0s ease 0s;
-moz-transition: background-position 0s ease 0s;
-o-transition: background-position 0s ease 0s;
-ms-transition: background-position 0s ease 0s;
transition: background-position 0s ease 0s;
}
먼저 모든 속성을 전환으로 설정 한 다음 background-position 속성에 대한 전환 만 덮어 쓰려고했습니다.
그러나 이것은 또한 다른 모든 속성을 재설정하는 것처럼 보입니다. 따라서 기본적으로 전환이 더 이상 발생하지 않는 것 같습니다.
모든 속성을 나열하지 않고이 작업을 수행 할 수있는 방법이 있습니까?
답변
다음은 Firefox에서도 작동하는 솔루션입니다.
transition: all 0.3s ease, background-position 1ms;
작은 데모를 만들었습니다 : http://jsfiddle.net/aWzwh/
답변
늦지 않기를 바랍니다. 한 줄만 사용하면됩니다!
-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
그것은 Chrome에서 작동합니다. CSS 속성은 쉼표로 구분해야합니다.
다음은 작동하는 예입니다. http://jsfiddle.net/H2jet/
답변
이 시도…
* {
transition: all .2s linear;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
}
a {
-webkit-transition: background-position 1ms linear;
-moz-transition: background-position 1ms linear;
-o-transition: background-position 1ms linear;
transition: background-position 1ms linear;
}
답변
표준 W3C 방식을 사용해 볼 수 있습니다.
.transition { transition: all 0.2s, top 0s, left 0s, width 0s, height 0s; }
답변
누구에게나 지연이있는 하나의 특정 속성을 제외한 모든 속성에 대한 전환을 추가하는 간단한 방법을 찾는 경우 최신 브라우저 간에도 차이 가 있음을 알고 있어야 합니다.
아래의 간단한 데모는 차이점을 보여줍니다. 전체 코드 확인
div:hover {
width: 500px;
height: 500px;
border-radius: 0;
transition: all 2s, border-radius 2s 4s;
}
Chrome은 아래와 같이 두 애니메이션을 “결합”합니다 (예상대로).
Safari가 “분리”하는 동안 (예상되지 않을 수 있음) :
더 호환되는 방법은 특정 속성 중 하나에 지연이있는 경우 특정 전환을 할당하는 것입니다.
답변
시험:
-webkit-transition: all .2s linear, background-position 0;
이것은 비슷한 일에서 나를 위해 일했습니다 ..