css

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

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

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

답변

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

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

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

.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;
}

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