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动画,监控动画执行完毕的更多相关文章

  1. 显示层封装及实现与优化(无动画+css3动画+js动画)

    showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  2. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  3. 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  4. 从零开始学习前端开发 — 15、CSS3过渡、动画

    一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...

  5. 第100天:CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...

  6. CSS3 animation(动画) 属性

    一.animation 1.CSS3 animation(动画) 属性 语法: animation: name duration timing-function delay iteration-cou ...

  7. IT兄弟连 HTML5教程 CSS3属性特效 动画-animation

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...

  8. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  9. CSS3的自定义动画帧

    CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...

随机推荐

  1. Spark 2.x 中 Sort-Based Shuffle 产生的内幕

    本课主题 Sorted-Based Shuffle 的诞生和介绍 Shuffle 中六大令人费解的问题 Sorted-Based Shuffle 的排序和源码鉴赏 Shuffle 在运行时的内存管理 ...

  2. 019.2 map集合类

    Map<k,v>Map:双列集合,一次存一对,键值对,类似于python的字典.共性功能:1.添加    v put(key,value)     //返回key的旧值    putAll ...

  3. JavaScript 数组遍历方法的对比

    JavaScript 发展至今已经发展出多种数组的循环遍历的方法,不同的遍历方法运行起来那个比较快,不同循环方法使用在那些场景,下面将进行比较: 各种数组遍历的方法 for 语句 ,,,] , len ...

  4. 在 Deepin 中搭建 GitLab

    入职半个月了,一直在接受业务知识以及企业文化知识的培训,下周终于要开始上岗入手项目了.由于公司使用自己搭建的 GitLab 服务作为项目版本控制器,所以我决定学习一下 GitLab,由于这货跟 Git ...

  5. vim基础初步

    vim文本编辑器初步 一.跟vi编辑器的关系 可以说vim编辑器是vi编辑器的升级版,它保留了vi编辑器的所有东西,而且加入了自己的新的特性. 比如说:支持跨平台,支持语法高亮,支持多级撤销等. ++ ...

  6. [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\] ...

  7. 【[SDOI2014]数数】

    被慎老师教育数位\(dp\)怎么写了 看来我数位\(dp\)的写法太落后了 这道题很显然就是一个\(AC\)自动机上的数位\(dp\),按照套路 我们可以设计\(dp[i][j][0/1]\)表示匹配 ...

  8. CF219D Choosing Capital for Treeland

    嘟嘟嘟 树形dp. 首先一个很常规的想法就是如果u到v有一条边,那么建立cost(u, v) = 0, cost(v, u) = 1的两条边. 可以两遍dfs. 先任选一个点作为根节点,第一遍从下往上 ...

  9. java反序列化Commons-Collections5分析

    BadAttributeValueException package org.lain.poc; import org.apache.commons.collections.Transformer; ...

  10. programming-languages学习

    programming-languages学习 */--> pre.src {background-color: #292b2e; color: #b2b2b2;} pre.src {backg ...