总结一下在网页上动画效果都是怎么搞的

一般来讲。。动画效果都是应用在一些产品展示页面的，而下面有三种方法实现动画效果，八仙过海，各显神通。

1

#animated_div
    {
    width: 200px;
    -moz-animation:animated_div 5000ms infinite;
    -webkit-animation:animated_div 5s 1;
    -o-animation:animated_div 5s 1;
    animation-timing-function: cubic-bezier(0.42,0,0.58,1);
    position: relative;
    }
#animated_div:hover{
    animation-play-state:paused;
}
@keyframes animated_div
{
    0%  {transform:rotate(0deg);left:-700px;top:0px;}
    12.5%  {transform:rotate(360deg);left:-700px;top:0px;}
    25%  {transform:rotate(360deg);left:700px;top:0px;}
    37.5%  {transform:rotate(0deg);left:700px;top:0px;}
    50%  {transform:rotate(0deg);left:700px;top:500px;}
    62.5%  {transform:rotate(-360deg);left:700px;top:500px;}
    75%  {transform:rotate(-360deg);left:-700px;top:500px;}
    87.5%  {transform:rotate(0deg);left:-700px;top:500px;}
    100% {transform:rotate(0deg);left:-700px;top:0px;}
}

<div class="dage">
<img src="http://idowebok.u.qiniudn.com/77/iphone2.png" alt="iphone" class="animated_div" id="111" />
</div>(为了适用各个浏览器，当然还要加上-moz- -webkit- -o-)

这个例子是用了@keyframes 来创造一个动画，从0%到100%的过程。（从初始状态到不同的目标状态），创造了这个方法之后，只需要在样式中“使用”，animation:定义的名字 播放时间 播放次数。搞定，个人觉得这是非常吊的方法，毕竟能实现挺复杂的动画。这个可以直接触发，也可以条件触发，只要写上JS，if(XXXX)  #111.addClass('animated_div')

就妥妥的。

好的。第二个

2

第二个就是主要用CSS3 初始状态有一个style。然后目标状态，设定一个CSS3动作，比如transform rotate(300deg）translate3d之类的。这样也是可以条件触发，加上JS，addClass就搞定了。不过！这时候你要出动画效果！就有一个重要环节！！！transition:all 0.7s cubic-bezier(1,-1.37,.54,1.57);赛尔曲线！！！这样的动画就棒棒哒。当然，不用这个，用transition-duration: 400ms;直接规定时间也阔以，但是用transition:all 0.7s cubic-bezier(1,-1.37,.54,1.57);就美多了。

3.3就是只用JS，不用CSS3了。

JQ里面有个div.animate({ top: '-=100px',left:'-200px' }, 600, 'easeOutCubic', function () { … }) 直接也是可以做动作。。但是当然，方法二有初始状态和目标状态，能做的动作是比较复杂的，而方法一就可以超复杂。而方法三就做一般的小动作咯。。好了，总结完了。。