一 使用animate.css动画 // 通过@import引入外部css资源;
// 引入线上图片及js文件;
// 通过更改css类名生成不同类型的css3动画;


1 2 3 4 5 6 25 26 27 28 29 45


二 自定义animate.css动画 // 可以使用animate.css代码作为基础,编写自定义的动画效果;
1 @keyframes bounce { /*通过@keyframes规则,创建bounce动画;*/ 2 0%,20%,50%,80%,100% { 3 transform:translatey(0); 4 } 5 40% { 6 transform:translatey(-30px); 7 } 8 60% { 9 transform:translatey(-15px);10 }11 }12 .bounce {13 animation-name:bounce; /*调用bounce动画;*/14 }15 .animated {16 animation-duration:3s; /*一个动画周期的时长;*/17 animation-fill-mode:both; /*指定动画执行之前之后的样式;*/18 }19 .animated.infinite {20 animation-iteration-count:infinite; /*定义动画播放的次数;(n次/infinite无限次);*/21 }
1
三 使用javascript控制动画 1 $('img').click(function(){ // 给img元素绑定点击事件;2 var $this = $(this); // 鼠标点击之后添加相应的动画类名; 3 $this.addclass('animated bounce').one('webkitanimationend mozanimationend msanimationend oanimationend',function(){4 // 当-webkit-animation动画结束之后会有一个webkitanimationend事件;5 // 当one()方法监听到webkitanimationend事件之后才执行function函数;one()方法只能执行一次;6 $this.removeclass(); // 清除相应的动画类名;7 })8 });