过渡动画

Question

我非常接近我想做的事，但仍有一些问题。

我想要的只是来自div外部的#sca并一直待在那里直到页面关闭，我希望这会发生过渡效果非常顺利。我也希望它在没有：focus，：hover，：活动事件的情况下发生，我希望它在页面打开后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/

从那里开始应该很容易！

Answer 2

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

以下是回答您问题的示例：

JS Fiddle Demo

<强>使用Javascript：

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