我尝试使用CSS3为图片制作动画,但效果很好,但是动画结束时消失了。
在这里您可以尝试(单击屏幕中间的图片,您可以看到另一张在Y轴上平移的图片,在中间尝试另一张按钮以重新启动动画)
http://jsfiddle.net/58CEh/
这是我的CSS3动画
body
{
background-image:url("Pictures/background.jpg");
background-image: no-repeat;
position: relative;
}
#icon
{
margin-left:35%;
margin-top:25%;
position: fixed;
}
#desk
{
margin-left:35%;
margin-top: 18%;
position: fixed;
}
#chat
{
top: -400px;
margin-left:50%;
position: fixed;
}
#outlook
{
top: -400px;
margin-left:50%;
position: fixed;
}
#outlook2
{
top: -400px;
margin-left:10%;
position: fixed;
}
:target
{
-webkit-animation: soBounceBitch 1.6s linear;
}
@-webkit-keyframes soBounceBitch {
from { -webkit-transform:translateY( 1200px); }
46% { -webkit-transform:translateY( 1110px); }
48% { -webkit-transform:translateY( 1020px); }
50% { -webkit-transform:translateY( 1000px); }
52% { -webkit-transform:translateY( 940px); }
60% { -webkit-transform:translateY ( 900px ) ; }
64% { -webkit-transform:translateY ( 880px ) ; }
70% { -webkit-transform:translateY ( 840px ) ; }
74% { -webkit-transform:translateY ( 790px ) ; }
80% { -webkit-transform:translateY ( 760px ) ; }
100% { -webkit-transform:translateY ( 760px ) ; }
to { -webkit-transform:translateY( 700px ); }
如您所见,我没有隐藏任何东西...
最佳答案
它们并没有消失,它们只是在动画完成后恢复到原始位置。
要解决此问题,您想要(在CSS中)将元素的位置设置为希望它们结束的位置。
请参见this线程。