css3动画,监控动画执行完毕
在CSS3之前,在网页上要做动画,一般使用javascript来实现,用timer定时执行一些操作来实现动画效果。
自有了CSS3之后,在网页上做动画变得更简单了。相对于使用javascript的实现方式,用CSS3实现的动画效果更流畅,实现起来也更简单。当然,因为CSS几乎没有什么逻辑控制,所以一般只用来做一些简单的、与用户没有交互的动画。
在CSS3中有两种实现动画的方式,一种是使用transition,另一种是使用animation。如果只是想要简单的过渡效果,则使用transition,如果是做稍微复杂一点的、在不同时间点执行不同动画效果的动画,则应使用animation。
用CSS3实现动画虽然简单,但如何监控动画的执行呢?比如,你可能希望在动画执行完毕之后执行某些操作。
第一种比较low的方式是可以设置一个与动画相同时长的timer。
假设动画时长是1s:
#mydiv{
transition: 1s;
}
则可以在动画开始执行后,相隔相同时间后执行你要的操作:
setTimeout(function(){
// do something
}, 1000);
这种方式虽然low,但一般情况下却是可行的。
但这种方式却是不够精确的。因为CSS3的动画在执行过程中并不是精确的时间,你设置了动画时长1s,但实际时长却可能会稍短或稍长。另外,timer的时间也是不精确的。
那么,如果你需要比较精确的在动画执行完毕之后执行某个操作,则应该监听transitionend事件。
mydiv.addEventListener('transitionend', function(){
// do somthing
}, false)
css3动画,监控动画执行完毕的更多相关文章
- 显示层封装及实现与优化(无动画+css3动画+js动画)
showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性
首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...
- 从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
- 第100天:CSS3中animation动画详解
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...
- CSS3 animation(动画) 属性
一.animation 1.CSS3 animation(动画) 属性 语法: animation: name duration timing-function delay iteration-cou ...
- IT兄弟连 HTML5教程 CSS3属性特效 动画-animation
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- CSS3的自定义动画帧
CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...
随机推荐
- Mysql的命令
学习mysql命令必须先安装哦:安装教程 1.doc连接Mysql 格式: mysql -h主机地址 -u用户名 -p用户密码 1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql ...
- Hbase集群部署
1.安装Hadoop集群 这个之前已经写过 2.安装Zookeeper 这个之前也已经写过 3.下载hbase,放到master机器,解压 4.修改hbase-env.sh,添加Java地址 expo ...
- 检查 NaN 数据值 (C/C++/Python 实现)
NaN 是 Not a Number 的缩写.它是一个数值类型值,通常在浮点计算中,表示未定义或无法表示的值.而且,不能直接使用相等运算符 (==) 检查 NaN.由于在程序中,nan == nan ...
- Scratch3.0——作品截图
原文地址:https://blog.csdn.net/weiwoyonzhe/article/details/86603217 Scratch 的舞台是基于canvas,最初尝试直接通过canvas的 ...
- Asp.Net MVC Identity 2.2.1 使用技巧(六)
使用用户管理器之角色管理 一.建立模型,这里我们其实在之前的技巧(五)已经建好了. 二.建立控制器RolesAdminController 1.在controllers文件夹上点右键>添加> ...
- awk 截取某段时间的日志
好久没有截取nginx/haproxy 中 的日志了,竟有点不熟悉了. 记录一下,以免以后忘记. NGINX 日志格式: 192.168.1.26 - - [14/Sep/2017:16:48:42 ...
- August 23rd 2017 Week 34th Wednesday
Do not pray for easy lives. Pray to be stronger men. 不要祈祷舒适的生活,而是祈祷自己能变得更强大. It seems this quotation ...
- 理解活在Iphone中的那些App (四)
App生存环境之宿主环境 终于开始说一些技术性的话题了,从这里开始的一些技术细节的东西,以前我也没有太刻意的注意过.为了写这个也是刚刚看了一点资料,如果有纰漏,恳请指出. 一个App生存的宿主环境主要 ...
- Spark SQL on Yarn-Cluster
Spark SQL 或者Hive SQL在yarn-client模式下运行正常,但是在yarn-cluster模式下总是报 status failed错误, 需要把$SPARK_HOME/lib/sp ...
- java BigDecimal解析及注意事项
BigDecimal简介 JDK文档(中文)中的解释如下: 不可变的.任意精度的有符号十进制数.BigDecimal 由任意精度的整数非标度值 和 32 位的整数标度 (scale) 组成.如果为零或 ...