我尝试使用 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 ); }
如你所见,我没有隐藏任何东西......
最佳答案
关于html - CSS3动画,图片移动后消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22746194/