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 ...
随机推荐
- Spark 2.x 中 Sort-Based Shuffle 产生的内幕
本课主题 Sorted-Based Shuffle 的诞生和介绍 Shuffle 中六大令人费解的问题 Sorted-Based Shuffle 的排序和源码鉴赏 Shuffle 在运行时的内存管理 ...
- 019.2 map集合类
Map<k,v>Map:双列集合,一次存一对,键值对,类似于python的字典.共性功能:1.添加 v put(key,value) //返回key的旧值 putAll ...
- JavaScript 数组遍历方法的对比
JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景,下面将进行比较: 各种数组遍历的方法 for 语句 ,,,] , len ...
- 在 Deepin 中搭建 GitLab
入职半个月了,一直在接受业务知识以及企业文化知识的培训,下周终于要开始上岗入手项目了.由于公司使用自己搭建的 GitLab 服务作为项目版本控制器,所以我决定学习一下 GitLab,由于这货跟 Git ...
- vim基础初步
vim文本编辑器初步 一.跟vi编辑器的关系 可以说vim编辑器是vi编辑器的升级版,它保留了vi编辑器的所有东西,而且加入了自己的新的特性. 比如说:支持跨平台,支持语法高亮,支持多级撤销等. ++ ...
- [SDOI2016]数字配对
题目 发现要求配对的条件是这样 \[a_j|a_i,\frac{a_i}{a_j}=p_1\] 我们考虑一下再来一个\(a_k\),满足 \[a_k|a_j,\frac{a_j}{a_k}=p_2\] ...
- 【[SDOI2014]数数】
被慎老师教育数位\(dp\)怎么写了 看来我数位\(dp\)的写法太落后了 这道题很显然就是一个\(AC\)自动机上的数位\(dp\),按照套路 我们可以设计\(dp[i][j][0/1]\)表示匹配 ...
- CF219D Choosing Capital for Treeland
嘟嘟嘟 树形dp. 首先一个很常规的想法就是如果u到v有一条边,那么建立cost(u, v) = 0, cost(v, u) = 1的两条边. 可以两遍dfs. 先任选一个点作为根节点,第一遍从下往上 ...
- java反序列化Commons-Collections5分析
BadAttributeValueException package org.lain.poc; import org.apache.commons.collections.Transformer; ...
- programming-languages学习
programming-languages学习 */--> pre.src {background-color: #292b2e; color: #b2b2b2;} pre.src {backg ...