0

我正在为一家玩具店开发一个网站，他们想让一个气球在背景中飞来飞去。到目前为止它运行良好，但在 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);}
}

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

http://redballoontoystore.com/e/

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

4

0 回答 0