CSS3+Jquery实现banner图特效

代码分析：

 /*CSS 部分*/
 /*左侧文字动画函数Class*/
 .leftslidesty{-webkit-animation : leftslide .5s ease-in forwards;}
 /*右侧文字动画函数Class*/
 .rightslidesty{-webkit-animation : rightslide .5s ease-in forwards;}

 /*左侧文字动画函数*/
 @-webkit-keyframes leftslide{
	0%{left:-600px;top:124px;}
	100%{left:199px;top:124px;}
 } 
 /*右侧文字动画函数*/
 @-webkit-keyframes rightslide{
	0%{right:-600px;top:231px;}
	100%{right:199px;top:231px;}
 }
 
 
 /*JS部分*/
 /*页面一加载执行*/
$(document).ready(function(){
	$(".lefttext").addClass("leftslidesty");
	$(".righttext").addClass("rightslidesty");
});

演示地址：

http://www.sipeng.net/ParentPage/htmlcontent/effectspage/slideText/slidetext.html