Question

See this fiddle for an example of what I mean or view this code.

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

The animation occasionally jumps about or changes speed, particularly when you hover over it… I have tried running the animation on its own (without the transition defined) and it runs smoothly and as expected. I have run the transition on its own and it works as expected. The combination seems to cause the problem.

Could be a Firefox implementation bug? I’m running Firefox 6.0.1, Ubuntu 11.04.

Answer 1

You need to replace ‘all’ by ‘background’. Then it works fine. I think when you hover it will transition all styles, so also the current-margin-left to the new margin-left, which is the same, so the margin doesn’t change for the duration of the transition. Afterward the animation takes precedence again and you see the jump.