第一种方法： 
用计时器，设定一个和动画时长一样的time，过time事件去执行这个函数。 
setTimeout(function(){ },time); 
第二种方法：

当-webkit-animation动画结束时有一个webkitAnimationEnd事件，只要监听这个事件就可以了。

不同浏览器的AnimationEnd写法 (webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)

例子：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>webkitAnimationEnd</title>

<style type="text/css">

#div1{

    margin: 200px auto 0;

    width: 200px;

    height: 200px;

    color: #fff;

    background-color: #000;

    -webkit-animation: transform 3s 2 ease;

}

@-webkit-keyframes transform {

    0%{

        -webkit-transform: scale(1) rotate(50deg);

    }

    30%{

        -webkit-transform: scale(2) rotate(100deg);

    }

    6%{

        -webkit-transform: scale(0.5) rotate(-100deg);

    }

    100%{

        -webkit-transform: scale(1) rotate(0);

    }

}

</style>

</head>

<body>

<div id="div1"></div>

<script type="text/javascript">

    var o = document.getElementById("div1");

    o.addEventListener("webkitAnimationEnd", function() {

       // this.className = "";

        alert("动画结束");

    })

</script>

</body>

</html>

css3在动画完成后执行事件的更多相关文章

  1. css3用AnimationEnd判断动画是否完成， css3在动画完成后执行事件

    用css3的animation完成一个动画,当只有这个动画完成时才执行令一个事件,比如让动画保持在终止的状态或其他一些事件.我们该怎么办呢. 第一种方法: 用计时器,设定一个和动画时长一样的time, ...

  2. jquery动画函数里面可以跟一个回调函数，表示动画结束后执行的代码

    jquery动画函数里面可以跟一个回调函数,表示动画结束后执行的代码 使用js监听动画结束后进行的操作: $ele.fadeIn(300,function(){...}) $ele.fadeOut(3 ...

  3. js关闭或者刷新页面后执行事件

    onbeforeunload 使用方法 window.onbeforeunload=function(){ return ''; } 有返回值才能弹出显示,或者有需要执行的事件也行.

  4. （判断）window.open()窗口被关闭后执行事件

    $(function() { // start ready var $article_share=$('#body .article').find('li.share'); // $article_s ...

  5. JQuery 页面加载完成后执行事件

    一: $(document).ready(function(){ //code }) 二: jQuery(document).ready(function(){ //code }) 三: window ...

  6. 监测c3动画过渡完成的事件

    监测css3动画完成的事件 transitionend 用法: let element = document.getElementById("slidingMenu"); elem ...

  7. zTree默认勾选指定ID并执行事件

    try { var arrs = $('#subjectClassID').val().split(","); var treeObj = $.fn.zTree.getZTreeO ...

  8. WPF动画结束后的行为方式

    原文:WPF动画结束后的行为方式 在WPF中可以使用Animation来完成动画功能,如移动,旋转等,最近写的一个程序需要实现控件的移动,包括自动移动和手动控制.原理很简单,就是改变控件的Margin ...

  9. PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题

    PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...

随机推荐

  1. Lowest Common Ancestor in a Binary Tree

    二叉树最低公共祖先节点 acmblog If one key is present and other is absent, then it returns the present key as LC ...

  2. vue 倒计时返回首页

    1. vue页面15分钟无操作时返回首页 2. 基于vue的倒计时demo 3. 在vue2.0项目中一个简单的倒计时功能 4. vue重新发送验证码 5. 表格<td>里面文字垂直显示

  3. 洛谷P1456 Monkey King

    https://www.luogu.org/problemnew/show/1456 #include<cstdio> #include<iostream> #include& ...

  4. sparse representation 与sparse coding 的区别的观点

    @G_Auss: 一直觉得以稀疏为目标的无监督学习没有道理.稀疏表示是生物神经系统的一个特性,但它究竟只是神经系统完成任务的副产物,还是一个优化目标,没有相关理论,这里有推理漏洞.实际上,稀疏目标只能 ...

  5. 兼容firefox，ie，谷歌，阻止浏览器冒泡事件，Firefox不支持event解决方法

    兼容firefox,ie,谷歌,阻止浏览器冒泡事件,Firefox不支持event解决方法 // 获取事件function getEvent(){ if(window.event) {return w ...

  6. springboot+mybatis使用PageHelper分页

    项目结构和spring搭建mybatis请参考springboot整合mybatis.在这个基础上配置分页. 一:导入PageHelper依赖 <dependency> <group ...

  7. 博皮设计：HTML/CSS/Javascript 源码共享

    首先感谢 sevennight 对我的大力帮助,由此他也成为了我的第一位园友:其次,由于本人并不了解 HTML/CSS,因此几乎都在 李宝亨 设计的 博皮源码 的基础上进行的修改:最后,为了获得 更加 ...

  8. Anaconda+django写出第一个web app（四）

    前面对Models有了一些了解,今天开始进一步了解Views,了解Views如何和Models交互以及了解模板(templates). 打开main文件夹下的views.py,重新编写homepage ...

  9. UNIX网络编程 第6章 I/O复用：select和poll函数

    UNIX网络编程 第6章 I/O复用:select和poll函数

  10. 解决 Electron 包下载太慢问题

    项目下新建 .npmrc 文件,加入如下配置: electron_mirror=https://npm.taobao.org/mirrors/electron/ 即使用淘宝的源,重新 npm inst ...