css - 过渡动画

Question

我已经很接近我想做的了，但还有一些问题。

我想要的只是 #sca 来自 div 外部并一直停留在那里直到页面关闭，我希望这发生时过渡效果非常平滑。我也希望它在没有 :focus、:hover、:active 事件的情况下发生，我希望它在页面打开后 2 秒发生。

如果有人能帮助我，我将不胜感激..这太难了。

#sceneo {width:1200px;height:300px;border:1px solid red;margin:0 auto;}
#scenet {width:650px;height:300px;border:1px solid black;background-color:#FAFAFA;margin:0 auto;}
#sca {float:left;position:relative;left:0;width:271px;height:180px;background: url(http://img521.imageshack.us/img521/7913/123hc.png) no-repeat;display:block;position:relative;right:300px; opacity:0.5; 
transition: all 2s;
-moz-transition: all 2s; /* Firefox 4 */
-webkit-transition: all 2s; /* Safari and Chrome */
-o-transition: all 2s; /* Opera */
-webkit-transition-delay:2s;
}
#sca:hover {left:280px;}

<div id="sceneo">
<div id="sca"></div>
<div id="scenet">
</div>

Answer 1

你快到了!你需要创建一个 KEYFRAME 动画(据我所知 Opera 还没有这个，但是 webkit、mozilla 和新的 IE 都支持它们)

http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/ 上有一篇很棒的文章关于如何使用关键帧

这里还有一个快速的 jsfiddle:http://jsfiddle.net/2wMVR/3/

从那里应该很容易!