第一种方法： 
用计时器，设定一个和动画时长一样的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. LGP4577【JSOI2018】战争

    题解: 求出$A$ 和$-B$ 的$Minkowsiki$和再$O(logn)$判断一个点是否在凸包内: $Minkowsiki$的求法比较容易忘,要多多温习才可以: #include<bits ...

  2. GoLand语言快捷键

    快捷键 作用 备注 ctrl + n 导航到类名 ctrl + shift + n 导航到文件 ctrl + e/ctrl + shift + e 打开到最近的文件/打开最近修改的文件 ctrl + ...

  3. MySQL 第五篇：索引原理与慢查询优化

    一 介绍 为何要有索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,因此对查询语句 ...

  4. E - Down or Right Codeforces Round #504 (rated, Div. 1 + Div. 2, based on VK Cup 2018 Final)

    http://codeforces.com/contest/1023/problem/E 交互题 #include <cstdio> #include <cstdlib> #i ...

  5. Chapter1（预科）--C++Prime笔记

    心得体会: 因为之前一直在用在学C,因此在看完C++Prime第一章后,就有中在一个培训班中,一个老师用一个简单的项目来带你了解这种语言的特性的感觉.当然这个告诉是在让你脑子固化接受一些点的前提下. ...

  6. Java入门：注册模块的实现

    1.主活动图 用户选择注册选项,进入注册界面,开始输入注册信息,到最后完成注册.具体的活动图如下: 以上活动图中,矩形框里的操作不是在一个类里面实现的,而是通过Form类和UserService类来实 ...

  7. iperf测试网络性能

      分类: LINUX 2013-06-17 18:52:21     Iperf是一个网络性能测试工具.可以测试TCP和UDP带宽质量,可以测量最大TCP带宽,具有多种参数和UDP特性,可以报告带宽 ...

  8. 我的编码习惯 - Controller规范

    原文出处: 晓风轻 请先阅读我这2篇文章 程序员你为什么这么累? 和 我的编码习惯 - 接口定义. 第一篇文章中,我贴了2段代码,第一个是原生态的,第2段是我指定了接口定义规范,使用AOP技术之后最终 ...

  9. NP难问题

    转自https://blog.csdn.net/u014295667/article/details/47090639 1.首先涉及到的基本概念有: (1)确定性算法(Determinism): 设A ...

  10. 修改home下的中文目录为英文目录

    原文地址:http://blog.csdn.net/esonbest1234/article/details/50729582 习惯问题,喜欢使用fedora为您在home目录下自创建的“桌面”.“文 ...