Css 过渡动画

我非常接近我想做的事情，但仍然存在一些问题

我所希望的是#sca来自div之外，一直保持在那里，直到页面关闭，我希望这种情况发生时过渡效果非常平滑。我还希望它在没有：焦点、：悬停、：活动事件的情况下发生，我希望它在页面打开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>

#场景{宽度：1200px；高度：300px；边框：1px实心红色；边距：0自动；}
#场景{宽度：650px；高度：300px；边框：1px纯黑色；背景色：#FAFAFA；边距：0自动；}
#sca{float:left；位置：relative；left:0；宽度：271px；高度：180px；背景：url(http://img521.imageshack.us/img521/7913/123hc.png)无重复；显示：块；位置：相对；右侧：300px；不透明度：0.5；
过渡：所有2；
-moz转换：所有2；/*Firefox 4*/
-webkit转换：所有2；/*Safari和Chrome*/
-o-过渡：所有2；/*Opera*/
-webkit转换延迟：2s；
}
#sca:hover{left:280px；}

你就快到了！你需要创建一个关键帧动画（据我所知Opera还没有，但webkit、mozilla和新IE都支持）

在上有一篇关于如何使用关键帧的精彩文章

这里还有一个快速的JSFIDLE：

---

从那里应该很容易

如果您不想处理关键帧，您可以使用CSS3 javascript库，例如为您处理所有转换和内容的库。在我看来，这比手工编写CSS3容易得多

下面是一个回答您问题的示例：

Javascript:

$("#sca").transition({ left: '0px', opacity: 1, delay: 2000 }, 2000, 'in');