css3动画效果，改变图片的宽度，为何有抖动现象,怎样解决？

我原来需求是这样的：背景图慢慢放大，有一个动画效果。

实现：用background-size慢慢缩小。（如：页面背景是1920x1080，那就把background-size从某个值慢慢变化到1920x1080）

代码如下：

.anim-bg{animation:animbg 10s linear 0s both;}

@-webkit-keyframes animbg

from{background-size:2112px 1188px}

to{background-size: 1920px 1080px;}

}

结果：firefox效果挺好的，但chrome/360会抖动，IE11甚至都不支持background-size变化动画，不知为什么。

----------------------------- 神奇分割线-------------------------------------------

最后使用的是scale，也是一样的效果：把图片慢慢从1.1倍缩小到1倍，反正这样chrome 也可以平滑的变化。

@keyframes kenburns {

0% {

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

100% {

-webkit-transform: scale(1);

transform: scale(1);

}

}

参考来看这个效果： CSS3全屏背景图片缩小渐变代码

注：

1. 也有js插件实现背影无限变化的，也是通过background-size处理的，chrome一样会抖动。
2. 动画过程，cpu占用会明显偏高