CSS3中Animation为同一个元素添加多个动画效果
CSS3 Animation 并未提供 给一个元素同时添加多个动画效果的方法，就是说一个元素，只能给它定义一个动画效果，不能同时定义。
需求说明
比如说，我想实现一个这样的动画效果:
一颗星星从上往下滑落，当滑落到指定位置时开始闪烁
这里就用到了两个动画效果: 1. 从上往下滑落 (单次动画) 2. 闪烁 (循环动画)
因为 CSS3 Animation 是不能给星星这个元素同时定义这两个动画效果的，所以我们就只能从其它方向入手了。
思考解决方案
我是这样想的，既然不能同时定义两个动画，那能不能在元素执行完第一个动画时，立即定义第二个动画，然后执行呢？
开始按照思路尝试着解决问题
首先就是怎么才能判断第一个动画执行完了呢？(这是关键，这个问题解决了，问题也就迎刃而解了。。。)
经过一番查找，我发现可以通过 事件监听 的方式，来实现这个功能。(没有了 Google, Baidu 也是可以的)
CSS3 Animation 事件监听
这里仅以 -webkit- 为例，并未测试浏览器兼容 (Chrome, Safari 和 Opera 相应内核浏览器有效)
-webkit-animation 动画其实有三个事件：
开始事件 webkitAnimationStart (标准语法为 AnimationStart)
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration
因此根据需求，我需要做的就是 监听 结束事件 webkitAnimationEnd (有其它需求，可以尝试监听其它事件，这里以本例为主)
方法总结
先给元素定义第一个滑落的动画效果，并且使用 JS 监听动画结束事件，当监听到第一个动画结束时，移除第一个动画效果，重新定义闪烁的动画效果。
逻辑清楚了，接下来就是实现。
实现功能
主要代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> div { width: 100px; height: 100px; background: red; position: relative; } .animation1 { animation: upin 2s ease; -webkit-animation: upin 2s ease; } .animation2 { animation:beat .93s infinite ease ; -webkit-animation:beat .93s infinite ease ; } @keyframes upin{ 0% { opacity: 0; transform: translateY(-100%) } 100% { opacity: 1; transform: translateY(0) } } @-webkit-keyframes upin{ 0% { opacity: 0; -webkit-transform: translateY(-100%) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @keyframes beat { 0% {-webkit-transform: scale(1)} 15% {-webkit-transform: scale(1.2)} 30% {-webkit-transform: scale(1)} 55% {-webkit-transform: scale(1.1)} 100% {-webkit-transform: scale(1)} } @-webkit-keyframes beat { 0% {-webkit-transform: scale(1)} 15% {-webkit-transform: scale(1.2)} 30% {-webkit-transform: scale(1)} 55% {-webkit-transform: scale(1.1)} 100% {-webkit-transform: scale(1)} } </style> </head> <body> <div ></div> <script type="text/javascript" src="http://m.gzojm.com/dist/js/jquery.min.js"></script> <script type="text/javascript"> var animationDiv = $("#animationDiv"); animationDiv.bind("webkitAnimationEnd", function() { animationDiv.removeClass("animation1"); animationDiv.addClass("animation2"); }); </script> </body> </html>
- 上一篇 »PHP会话控制之Cookie使用例子
- 下一篇 »不同编码页引用同一个css文件