Question

我有一个垂直+水平居中的div，在使用CSS动画调整大小时显示不稳定的抖动。

div绝对定位，具有固定的宽度/高度和负边距。

动画本身只是两组不同的固定宽度/高度和负边距值之间的切换，并设置了自定义过渡属性。

几乎感觉负边距在宽度和高度的不同速度下都会被动画化。

我尝试使用jQuery animate()而不是css()更改使用的CSS转换（线性，夸脱等），但它们会产生相同的结果。

是否有人能够解释为什么会发生这种情况并且可能是更好的方法，只要它适用于IE＆gt; = 8？

HTML

<div class="outer">
    <div class="inner">
        +
    </div>
</div>
<button>toggle</button>

CSS：

.outer {
    /* easeOutQuart */
    -webkit-transition: all 750ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
       -moz-transition: all 750ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
        -ms-transition: all 750ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
         -o-transition: all 750ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
            transition: all 750ms cubic-bezier(0.165, 0.840, 0.440, 1.000);

    position: absolute;

    width: 200px;
    height: 200px;

    left: 50%;
    top: 50%;

    margin-left: -100px;
    margin-top: -100px;

    outline: 1px solid red;       
}

.inner {
    position: absolute;

    width: 40px;
    height: 40px;

    top: 50%;
    left: 50%;    

    margin-left: -20px;
    margin-top: -20px;

    text-align: center;

    line-height: 40px;

    outline: 1px solid blue;    
}

button {
    width: 100px;
    height: 50px;
}

的jQuery

$button = $('button');
$outer = $('.outer');

$button.toggle(function() {
    $outer.css({
        'width': '100px',
        'height': '100px',
        'margin-left': '-50px',
        'margin-top': '-50px'
    });
}, function() {
    $outer.css({
        'width': '200px',
        'height': '200px',
        'margin-left': '-100px',
        'margin-top': '-100px'        
    });    
});

Answer 1

我没有代表简单评论，所以我会在这里给你我的意见。 IE8.0.7601.17514 64位没有转换。无论是大型还是小型......在1920x1080＆amp;运行时，我的FF11上的转换似乎完美无缺。但是，当我使用Web Developer Toolbar插件调整屏幕大小调整到1280x720并按下切换按钮时，红色框转换，蓝色框保持静止，并且小黑色十字准线振动并在整个地方反弹;在800x600时，红色盒子正常转换，但是中间的蓝色盒子在之前的静态振动并且可能被称为摇摇欲坠，在640x480时，一切都振动并反弹。基于此，我将不得不推断它必须做使用您的px定义的大小和相对于屏幕大小/分辨率的固定位置，而不是其他任何内容。

Answer 2

我认为答案在于实现舍入子像素值。

据我所知，Chrome 27.0似乎没有这个问题，但对于大多数其他浏览器，我认为它仍然没有解决。

渲染引擎应该如何发挥这种行为不是由CSS规范决定的，而是让它留给实现来按照它认为合适的方式进行渲染。

以上引用来自John Resig，他在子喷气机上发表了一篇有趣的帖子 - 以及关于这是否真的是一种理想的浏览器行为的热烈评论：http://ejohn.org/blog/sub-pixel-problems-in-css/

使用CSS动画缩放居中div时的不稳定行为

2 个答案: