Question

我长期使用此网站来帮助我使用我的CSS和HTML，但现在我似乎遇到了一个我无法找到答案的错误：

我在页面中心的父div中有一个左浮动div的加载。我使用阴影和移动边距为这些div做了一个3D悬停效果。然后我用css过渡动画了悬停。

我的问题是，在动画期间，div浮动到悬停类别的左侧稍微摆动几个像素。在动画的结束状态，它恰好在转换过程中位于正确的位置。

我认为这是因为div是浮动的并且内联，这实际上是无法改变的。但是左边的边距与右边的边距相同，所以为什么围绕它的div会摇摆不定呢？：（

我已经让小提琴在这里显示问题http://jsfiddle.net/9jqbX/

<div class="wrapper">

<div class="cube4 threedeehover"></div>
<div class="cube4 threedeehover"></div>
<div class="cube4 threedeehover"></div>
<div class="cube4 threedeehover"></div>

.wrapper {                          position: relative;
                                width: 960px;
                                margin-right: auto;
                                margin-left: auto;
                                padding-left: 10px;
                                padding-right: 10px;
                                padding-bottom: 20px; }

.cube4 {
                                float: left;
                                min-height: 1px;
                                position: relative;
                                margin-top: 20px;
                                margin-left: 10px;
                                margin-right: 10px;
                                width: 180px;
                                height: 180px;
                                overflow: hidden; padding: 20px;
                                background:#347ec9; }


.threedeehover {                    -webkit-transition: all 0.3s ease;
                                -moz-transition: all 0.3s ease;
                                -ms-transition: all 0.3s ease;
                                -o-transition: all 0.3s ease;
                                transition: all 0.3s ease; }

.threedeehover:hover {              box-shadow: 
                                1px 1px 0px 0px #fff,
                                2px 2px 0px 0px #eee,
                                3px 3px 0px 0px #fff,
                                4px 4px 0px 0px #eee,
                                5px 5px 0px 0px #fff,
                                6px 6px 0px 0px #eee,
                                7px 7px 0px 0px #fff,
                                8px 8px 0px 0px #eee,
                                9px 9px 0px 0px #adadad,   /*3D bottom border colour*/
                                5px 5px 20px 0px rgba(0,0,0,0.50);}

.cube4.threedeehover:hover {        margin-top: 11px; 
                                margin-left: 0px; 
                                margin-right:20px; }

我在OSX 10.9.4中使用Safari 7.05，任何帮助将不胜感激:)）

Answer 1

我认为这是Safari的问题，是的。

尝试使用translate代替margin。

小提琴：http://jsfiddle.net/nikoloza/9jqbX/1/

Answer 2

在Safari的最新更新之后，这个问题已经消失，因此我得出结论，这是一个webkit错误，而不是与我的代码有关。

浮动内联div的css动画

2 个答案: