CSS3 장면 전환과 함께 사용하면 CSS3 애니메이션이 이상하게 작동하는 이유는 무엇입니까?

Question

이 코드를 의미하는 예를 보려면 this fiddle을 참조하십시오.

<a href="/">test</a> 

a{ 
    background-color:#ccc; 
    transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
} 
a:hover{ 
    background-color:#888; 
} 

a{ 
    -moz-animation-duration: 3s; 
    -moz-animation-name: move; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-direction: alternate; 
} 

@-moz-keyframes move { 
    from { 
     margin-left: 0px; 
    } 

    to { 
     margin-left: 50px; 
    } 
    } 

애니메이션은 때때로에 대해 이동 또는 변화의 속도, 당신이 위에 마우스를 가져 가면 특히 ... 내가 (정의의 전환없이) 자체에 애니메이션을 실행하려하고 예상대로 원활하게 실행합니다. 전환 자체를 실행했으며 예상대로 작동합니다. 조합이 문제를 일으키는 것 같습니다.

Firefox 구현 버그 일 수 있습니까? Firefox 6.0.1, Ubuntu 11.04를 실행하고 있습니다.

Answer 1

'모두'를 '배경'으로 바꿔야합니다. 그럼 잘 작동합니다. 마우스를 올리면 모든 스타일이 전환되고, 현재 여백도 왼쪽으로 새 여백에 남았습니다. 이는 동일하므로 마진이 전환 기간 동안 변경되지 않습니다. 나중에 애니메이션이 다시 우선하며 점프를 봅니다.