数据载入中,请稍后......
 
展开
懒人码库客户端 点击或扫描下载
欢迎来到懒人码库!懒人码库QQ群:19651313
欢迎来到懒人码库!懒人码库QQ群:19651313  
当前位置:懒人码库 > HTML教程 > CSS

CSS3使用Animation为同一个元素添加多个动画效果 webkitAnimationEnd 事件监听

2015-07-04 19:50 来源:www.lanrenmaku.com / 作者:懒人 已被阅读:次 分类:CSS 上一篇:CSS3中如何使用animation 属性简写动画效果 下一篇:div中的img图片水平垂直居中

CSS3 Animation 并未提供 给一个元素同时添加多个动画效果的方法,就是说一个元素,只能给它定义一个动画效果,不能同时定义。

需求说明

比如说,我想实现一个这样的动画效果:

一颗星星从上往下滑落,当滑落到指定位置时开始闪烁

这里就用到了两个动画效果: 1. 从上往下滑落 (单次动画) 2. 闪烁 (循环动画)

因为 CSS3 Animation 是不能给星星这个元素同时定义这两个动画效果的,所以我们就只能从其它方向入手了。

思考解决方案

我是这样想的,既然不能同时定义两个动画,那能不能在元素执行完第一个动画时,立即定义第二个动画,然后执行呢?

开始按照思路尝试着解决问题

首先就是怎么才能判断第一个动画执行完了呢?(这是关键,这个问题解决了,问题也就迎刃而解了。。。)

经过一番查找,我发现可以通过 事件监听 的方式,来实现这个功能。(没有了 Google, Baidu 也是可以的)

CSS3 Animation 事件监听

这里仅以 -webkit- 为例,并未测试浏览器兼容 (Chrome, Safari 和 Opera 相应内核浏览器有效)

-webkit-animation 动画其实有三个事件:

开始事件 webkitAnimationStart (标准语法为 AnimationStart)

结束事件 webkitAnimationEnd

重复运动事件 webkitAnimationIteration

因此根据需求,我需要做的就是 监听 结束事件 webkitAnimationEnd (有其它需求,可以尝试监听其它事件,这里以本例为主)

方法总结

先给元素定义第一个滑落的动画效果,并且使用 JS 监听动画结束事件,当监听到第一个动画结束时,移除第一个动画效果,重新定义闪烁的动画效果。

逻辑清楚了,接下来就是实现。

实现功能

主要代码如下:

CSS3 样式:

  1. div {
  2. width: 100px;
  3. height: 100px;
  4. background: red;
  5. position: relative;
  6.  
  7. }
  8.  
  9. .animation1 {
  10. animation: upin 2s ease;
  11. -webkit-animation: upin 2s ease;
  12. }
  13.  
  14. .animation2 {
  15. animation:beat .93s infinite ease ;
  16. -webkit-animation:beat .93s infinite ease ;
  17. }
  18.  
  19. @keyframes upin{
  20. 0% {
  21. opacity: 0;
  22. transform: translateY(-100%)
  23. }
  24. 100% {
  25. opacity: 1;
  26. transform: translateY(0)
  27. }
  28. }
  29.  
  30. @-webkit-keyframes upin{
  31. 0% {
  32. opacity: 0;
  33. -webkit-transform: translateY(-100%)
  34. }
  35. 100% {
  36. opacity: 1;
  37. -webkit-transform: translateY(0)
  38. }
  39. }
  40.  
  41. @keyframes beat {
  42. 0% {-webkit-transform: scale(1)}
  43. 15% {-webkit-transform: scale(1.2)}
  44. 30% {-webkit-transform: scale(1)}
  45. 55% {-webkit-transform: scale(1.1)}
  46. 100% {-webkit-transform: scale(1)}
  47. }
  48.  
  49. @-webkit-keyframes beat {
  50. 0% {-webkit-transform: scale(1)}
  51. 15% {-webkit-transform: scale(1.2)}
  52. 30% {-webkit-transform: scale(1)}
  53. 55% {-webkit-transform: scale(1.1)}
  54. 100% {-webkit-transform: scale(1)}
  55. }

jQuery 代码(请自行添加 Jquery 类库):

  1. <div id="animationDiv" class="animation1"></div>
  2. <script type="text/javascript" src="jquery.min.js"></script>
  3. <script type="text/javascript">
  4. var animationDiv = $("#animationDiv");
  5. animationDiv.bind("webkitAnimationEnd", function() {
  6. animationDiv.removeClass("animation1");
  7. animationDiv.addClass("animation2");
  8. });
  9. </script>
  10.  

 

小贴士:懒人码库 为网页前端人员提供建站常用的广告代码和网页特效,内容涵盖焦点图,导航菜单,jQuery代码,图片特效,对联广告,日历控件,在线客服等。