Переходная анимация

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/

оттуда это должно быть легко!

Answer 2

Если вы не хотите иметь дело с ключевыми кадрами, вы можете использовать библиотеку javascript CSS3, такую ​​как jQuery Transit , которая обрабатывает все переходы и прочее для вас.На мой взгляд, это намного проще, чем кодировать CSS3 вручную.

Вот пример, который отвечает на ваш вопрос:

JS Fiddle Demo

Javascript:

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