css - 背景大小动画在 IE11 或 Ipad 中不起作用

Question

我正在尝试通过将背景图像设置为 div 然后使用动画调整该 div 的大小来创建一个简单的带有 CSS3 动画的 img 缩放。它在 FF 和 Chrome 中运行良好，但在 Safari 中效果不流畅。

我读到添加 -webkit-transform: translateZ(0) 可以帮助在 Safari 中实现更流畅的动画，但这没有效果。

谁能帮忙。网站在这里 http://form-flourish.businesscatalyst.com/form-pilates.htm

这是我的代码。
HTML:

<div id="home">
</div>

CSS:

   div#home {
    background: url("../images/home-bg.jpg") no-repeat scroll center center;
    background-size: 100% auto;
    float: left;
    margin: 0 0 20px;
    position: relative;
    width: 100%;
    min-height: 100vh;
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 20s;
    -webkit-animation-delay: 1s;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    -webkit-animation-direction: alternate;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    /* Standard syntax */
    animation-name: zoom;
    animation-duration: 20s;
    animation-delay: 1s;
    animation-timing-function: cubic-bezier(0, 0, 1, 1);
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-direction: alternate;
}

    /* Chrome, Safari, Opera */
@-webkit-keyframes zoom {
    0%   {width: 100%; margin-left: 0;}
    100% {width: 150%; margin-left: -25%;}
}
/* Standard syntax */
@keyframes zoom {
    0%   {width: 100%; margin-left: 0;}
    100% {width: 150%; margin-left: -25%;}
}

Answer 1

对于您问题的第一部分，Internet Explorer 11 的动画 CSS 属性集与它们在 IE 10 中开始使用的属性相同，background-size 不在其中可动画的。
(伙伴:即使W3Schools tells so)

参见 http://msdn.microsoft.com/en-us/library/ie/dn254934%28v=vs.85%29.aspx获取支持的属性列表。