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

您需要将'all'替换为'background'。然后它工作正常。我认为当你悬停它时会转换所有样式，所以当前边距左边也是新边距左边，这是相同的，因此边际在转换期间不会改变。之后动画再次优先，你会看到跳跃。

为什么CSS3动画与CSS3过渡一起使用会表现得很奇怪？

1 个答案: