Question

我正在尝试使用CSS3动画创建一个简单的img缩放，方法是将背景图像设置为div，然后使用动画调整div的大小。它在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不属于那些可动画的。
（Sidekick：即使W3Schools tells so）

有关支持的属性列表，请参阅http://msdn.microsoft.com/en-us/library/ie/dn254934%28v=vs.85%29.aspx。

Answer 2

我从你的CSS中做了一个简化的测试用例，虽然出现了水平滚动条，但它同时适用于IE11和Safari。所以，我认为应该有一些其他原因会中断你网站的动画。

测试用例：动画宽度＆＃39;和＆＃39;保证金＆＃39; （从您的代码简化） http://asamuzak.jp/test/background_size_animate_test

IE11（和10）确实缺乏对背景大小动画的支持，但之前我为此制作了一个polyfill。 http://asamuzak.jp/html/438 该文档是用日语编写的，但在脚本源中有一个最低限度的英文描述。

测试案例2：动画背景大小＆＃39;使用IE polyfill http://asamuzak.jp/test/background_size_animate_test2

背景大小动画无法在IE11或Ipad中运行

2 个答案: