배경 위치를 제외한 모든 속성에 CSS3 전환을 어떻게 적용합니까?


108

배경 위치를 제외한 모든 속성에 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 속성에 대한 전환 만 덮어 쓰려고했습니다.

그러나 이것은 또한 다른 모든 속성을 재설정하는 것처럼 보입니다. 따라서 기본적으로 전환이 더 이상 발생하지 않는 것 같습니다.

모든 속성을 나열하지 않고이 작업을 수행 할 수있는 방법이 있습니까?


1
안녕하세요, 저는 실제로이 문제를 찾고 있습니다. 수용 가능한 답변을 얻었습니까?
Milche Patern 2013

답변:


143

다음은 Firefox에서도 작동하는 솔루션입니다.

transition: all 0.3s ease, background-position 1ms;

작은 데모를 만들었습니다 : http://jsfiddle.net/aWzwh/


3
어떤 이유로 1ms나를 위해 작동하지 않았지만 작동했습니다 0.
Flimm

@Flimm, 어떤 브라우저를 사용하고 있습니까? "작동하지 않음"이란 무엇을 의미합니까? 애니메이션을 적용하지 않았습니다.
Felix Edelmann

1
나를 위해 1ms1ms none하지 않았지만 해냈습니다! @ericsoco 0ms또는 0s작동합니다.
BCoder

3
시간 단위에는 단위가 있어야합니다. 따라서 0은 4가 작동하지 않는 것처럼 작동하지 않지만 4는 0이 작동하는 것처럼 작동합니다.
ESR

2
나는 이것을 오랫동안 검색했습니다. 감사합니다, @FelixEdelmann !!
tatsu

17

늦지 않기를 바랍니다. 한 줄만 사용하면됩니다!

-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/


6
Chrome에서 이것을 시도하고 있는데 저에게 작동하지 않는 것 같습니다. all전이 속성에 상관없이 모든 사람을 무시하지 보인다.
animuson

2
흥미 롭군. 다른 속성으로 테스트하지 않은 것 같습니다. 내가 시도했을 때 color 0효과가 있었지만 확실히 background-position 0. background 0나에게 결과가 나오지 않는 경우도 있습니다 . 여기 Gaming.SE 메뉴에서 조작 한 jsFiddle이 있습니다. 솔직히 말해서 나는 background-position그 질문이 구체적으로 언급하고 내가 자신을 바꾸려고 시도한 것이기 때문에 처음 에만 테스트했습니다 .
animuson

2
그것은 나를 위해 크롬에서 작동했습니다. IE11에서 여전히 작동하지만 이번 주부터 all 속성은 나중에 라인의 모든 것을 재정의합니다.
cirrus

1
@cirrus 말했듯이, 크롬은 더 이상 0초 기간을 준수하지 않지만, 당신은 같은, 대신 매우 짧은 지속 시간을주는 일을 할 수 있습니다.1ms
GetFree

1
0 초가 아닌 기간이 제공되면 Chrome과 Firefox 모두에서 작동합니다.
Naisheel Verdhan 2015 년

4

이 시도...

* {
    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;
}

"이것을 시도"코드 전용 답변은 최고가 아닙니다. 당신이하는 일에 대한 설명이 더 좋습니다.
random_user_name


2

누구에게나 지연이있는 하나의 특정 속성을 제외한 모든 속성에 대한 전환을 추가하는 간단한 방법을 찾는 경우 최신 브라우저 간에도 차이 가 있음을 알고 있어야 합니다.

아래의 간단한 데모는 차이점을 보여줍니다. 전체 코드 확인

div:hover {
  width: 500px;
  height: 500px;
  border-radius: 0;
  transition: all 2s, border-radius 2s 4s;
}

Chrome은 아래와 같이 두 애니메이션을 "결합"합니다 (예상대로).

여기에 이미지 설명 입력

Safari가 "분리"하는 동안 (예상되지 않을 수 있음) :

여기에 이미지 설명 입력

더 호환되는 방법은 특정 속성 중 하나에 지연이있는 경우 특정 전환을 할당하는 것입니다.


과연. 이것은 중요한 통찰력입니다. 절름발이는 대신 각 속성을 개별적으로 지정해야하기 때문에 all브라우저에서 원하는 동작을 얻을 수있는 유일한 방법이라는 것을 아는 것이 유용합니다.
random_user_name

1

시험:

-webkit-transition: all .2s linear, background-position 0;

이것은 비슷한 일에서 나를 위해 일했습니다 ..


배경 위치를 0으로 고정하는 것은 배경 위치에서 전환을 제거하는 것이 아닙니다. 그렇지 않습니까?
Milche Patern 2013

1
이것은 작동하지 않습니다. 나중에 전환 속성을 다시 정의하면 이전 전환 속성이 ​​존재하지 않는 것처럼 완전히 재정의됩니다. 그들은 통합되지 않습니다.
animuson
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.