简单的css3动画效果（二）

        话说css3简单的动画可以通过初始属性和最终属性来完成，但是事情远没有这么简单，我在网上看到了很多更屌的动画效果，显然不是一个简单的动作就能完成的动画。

        我又去找资料了，发现有人说两个动画的执行只要第二个动画的延迟在第一个动画执行完毕之后生效就可以衔接起来，是有那么简单么？还有一种是写好两个动画的效果，然后用js控制他们的切换，当执行完第一个在执行第二个。

        第二个还是蛮靠谱的。我的两个动画结合的效果想要图片首先下降到指定位置，然后抖动到静止。我的代码：

.animation1{animation: updown1 2s ease; -webkit-animation: updown1 2s  ease;}

@keyframes updown1{

0%{opacity: 0; top:10%; transform: rotate(0deg);}

100%{ opacity: 1; top: 48%; transform: rotate(0deg);}

}

@-webkit-keyforms updown1{

0%{opacity: 0; top: 10%; transform: rotate(0deg);}

100%{ opacity: 1; top: 48%; transform: rotate(0deg);}

}

以上的这个是第一个动作的，-webkit-这个就不用我多说了。再来看第二个动作的代码

.animation2{animation: swing1 0.7s 1 ease; -webkit-animation: swing1 0.7s 1 ease;}

@keyframes swing1{

0%,15%,30%,45%,60%,75%,90%,100%{transform-origin:center center}

0%{transform: rotate(0deg)}

15%{transform: rotate(5deg);}

30%{transform: rotate(-12deg);}

45%{transform: rotate(3deg);}

60%{transform: rotate(-13deg);}

75%{transform: rotate(0deg);}

90%{transform: rotate(-13deg);}

100%{transform: rotate(-15deg);}

}

@-webkit-keyframes swing1{

0%,15%,30%,45%,60%,75%,90%,100%{-webkit-transform-origin:center center}

0%{-webkit-transform: rotate(0deg)}

15%{-webkit-transform: rotate(5deg)}

30%{-webkit-transform: rotate(-12deg)}

45%{-webkit-transform: rotate(3deg)}

60%{-webkit-transform: rotate(-13deg)}

75%{-webkit-transform: rotate(0deg)}

90%{-webkit-transform: rotate(-13deg)}

100%{-webkit-transform: rotate(-15deg)}

}

然后还要启动他们,不然只会执行第一个

$(function(){

var p5_1 = $("#p5_1");

p5_1.bind("webkitAnimationEnd", function() {

p5_1.removeClass("animation1");

p5_1.addClass("animation2");

});

这是两个动画的衔接，第二个表示抖动，持续的0.7秒时间里完成第二个动作。transform:rotate(Xdeg)表示旋转的度数;这里的抖动就是左右晃几下。