CSS列计数和过渡-奇怪的跳转在Chrome上

Question

我使用CSS列计数属性来实现2列。当我有一个带有悬停动画的按钮时-第一列按钮工作正常，但第二列按钮在悬停时出现奇怪的跳跃。

对于容器，我使用

column-count: 2;

for button its

transition: all ease-in .2s;
transform: translateX(0);

和按钮悬停在

transform: translateX(10px);

我做了一个小小提琴来演示。奇怪的是，它不仅在Chrome中工作。http://jsfiddle.net/jp6vt97g/2/

有什么想法吗?

Answer 1

在Chrome中使用transform时似乎有一个错误。作为一种变通方法，您可以动画margin-left而不是transform。

.cta-txt {
    display: inline-block;
    transition: all ease-in .2s;
    margin-left: 0;
}
.cta-txt:hover{
    margin-left: 10px;
}

http://jsfiddle.net/dfgueg49/1/