Question

我正在一家玩具店的网站上工作，他们希望在背景中有一个动画的气球飞来飞去。它到目前为止工作得很好但是在Safari上，它在动画完成后将主背景图像移动。 Chrome和Firefox工作得很好，如果我决定我关心，我仍然需要测试IE。有人知道如何在动画完成后使背景不移动吗？

<body>
<div id="balloonwrapper">
<div id="balloondiv"><img src="http://redballoontoystore.com/e/wp-content/uploads/2013/05/balloon.png" id="balloon"/></div>      
</div>
<div id="wrapper">
</div>
</body>

#balloonwrapper {
        margin: 0;
        width: 100%;
        height:0;
        overflow:visible;
}
#balloondiv {
        height:0;
        overflow:visible;
        position:relative;
        top:-600px;
        z-index:-1;
        animation: balloonfly 30s;
        -webkit-animation: balloonfly 30s;
        width:95px;
}

#balloon {
        float:left;
        position:absolute;
        animation: balloonwiggle 30s;
        -webkit-animation: balloonwiggle 30s;
        max-width:95px;
}

@keyframes balloonfly {
0% {left:92%; top:1000px;}
10% {left:92%; top:1000px;}
20% {left:92%; top:200px;}
30% {left:92%; top:300px;}
40% {left:92%; top:200px;}
65% {left: 2%; top:200px;}
74% {left: 2%; top: 300px;}
85% {left: 2%; top: 200px;}
91% {left: 2%; top: 300px;}
100%{left:2%;top:-600px;}
}

@-webkit-keyframes balloonfly {
0% {left:92%; top:1000px;}
10% {left:92%; top:1000px;}
20% {left:92%; top:200px;}
30% {left:92%; top:300px;}
40% {left:92%; top:200px;}
65% {left: 2%; top:200px;}
74% {left: 2%; top: 300px;}
85% {left: 2%; top: 200px;}
91% {left: 2%; top: 300px;}
100%{left:2%;top:-600px;}
}

@keyframes balloonwiggle {
0% {transform: rotate(0deg);}
10% {transform: rotate(0deg);}
39% {transform: rotate(0deg);}
45% {transform: rotate(-20deg);}
55% {transform: rotate(-20deg);}
65% {transform: rotate(0deg);}
100% {transform: rotate(0deg);}
}

@-webkit-keyframes balloonwiggle {
0% {-webkit-transform: rotate(0deg);}
10% {-webkit-transform: rotate(0deg);}
39% {-webkit-transform: rotate(0deg);}
45% {-webkit-transform: rotate(-20deg);}
55% {-webkit-transform: rotate(-20deg);}
65% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(0deg);}
}

随意在实际虚拟网站上查看。我不需要对动画进行任何批评，它还没有完成，所以不要费心告诉我如何让它看起来更真实。我只需要在Safari上找出这个bug。感谢。

http://redballoontoystore.com/e/

我刚刚注意到该页面上的内容区域很奇怪。 http://redballoontoystore.com/e/products-pag/

Safari中的CSS3动画错误

0 个答案: