使用CSS3的Animation为同一个元素添加多个动画效果
本文转载于:专业的前端网站➩使用CSS3的Animation为同一个元素添加多个动画效果
CSS3 Animation 并未提供 给一个元素同时添加多个动画效果的方法,就是说一个元素,只能给它定义一个动画效果,不能同时定义。
需求说明
比如说,我想实现一个这样的动画效果:
一颗星星从上往下滑落,当滑落到指定位置时开始闪烁
这里就用到了两个动画效果: 1. 从上往下滑落 (单次动画) 2. 闪烁 (循环动画)
因为 CSS3 Animation 是不能给星星这个元素同时定义这两个动画效果的,所以我们就只能从其它方向入手了。
思考解决方案
我是这样想的,既然不能同时定义两个动画,那能不能在元素执行完第一个动画时,立即定义第二个动画,然后执行呢?
开始按照思路尝试着解决问题
首先就是怎么才能判断第一个动画执行完了呢?(这是关键,这个问题解决了,问题也就迎刃而解了。。。)
经过一番查找,我发现可以通过 事件监听
的方式,来实现这个功能。(没有了 Google, Baidu 也是可以的)
CSS3 Animation 事件监听
这里仅以 -webkit- 为例,并未测试浏览器兼容 (Chrome, Safari 和 Opera 相应内核浏览器有效)
-webkit-animation 动画其实有三个事件:
开始事件 webkitAnimationStart (标准语法为 AnimationStart)
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration
因此根据需求,我需要做的就是 监听
结束事件 webkitAnimationEnd
(有其它需求,可以尝试监听其它事件,这里以本例为主)
方法总结
先给元素定义第一个滑落的动画效果,并且使用 JS 监听动画结束事件,当监听到第一个动画结束时,移除第一个动画效果,重新定义闪烁的动画效果。
逻辑清楚了,接下来就是实现。
实现功能
主要代码如下:
CSS3 样式:
jQuery 代码(请自行添加 Jquery 类库):
转载请注明:前端录»使用CSS3的Animation为同一个元素添加多个动画效果
更多专业前端知识,请上【猿2048】www.mk2048.com
原文地址:https://www.cnblogs.com/htmlandcss/p/11731402.html
- FireEye报告:揭露新型工控系统恶意软件TRITON
- 【开源】QuickPager ASP.NET2.0分页控件V2.0.0.6 修改了几个小bug,使用演示。
- Invoke-PSImage:将PS脚本隐藏进PNG像素中并用一行指令去执行它
- linux的内存清理相关知识!
- 一个页面搞定几乎所有的列表需求的实现思路和一点代码。
- 实现 Table 的行交替颜色、选中行变色的一种方法。演示+源码
- 【知识】使用Python来学习数据科学的完整教程
- 【开源】QuickPager ASP.NET2.0分页控件V2.0.0.4 增加了几个分页算法
- 虚拟时钟
- 正弦函数仿真
- 《你必须知道的.net》读书笔记 004 —— 1.4 多态的艺术
- 桶形移位寄存器(二)
- ROM
- 【查询】查询好像也可以很简单!
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Spring Boot 整合 Thymeleaf
- webapp打包为Android的apk包的一种方法
- Android应用之Hybird混合开发,集成web页面的方法尝试
- Spring Boot 通过 XML 的方式整合 MyBatis
- layUI登录界面验证码功能模块儿封装
- go语言微信公众号开发后台接口封装
- 【DB宝14】在Docker中只需2步即可拥有Oracle 11g企业版环境(11.2.0.4)
- 别忘了给gcc编译器工具链加上-fno-common选项
- 轻量安全的部署方案
- 算法集锦(34) | 强化学习| 出租车载客问题
- 前端测试题:(解析)关于ajax跨域的说法,下面错误的是?
- 什么才是定制化 IDE 的核心价值?
- RTOS内功修炼记(八)— CMSIS RTOS API,内核通用API接口
- 从零搭建Spring Boot脚手架(1):开篇以及技术选型
- 盘点 Python 10 大常用数据结构(下篇)