第一种方法： 
用计时器，设定一个和动画时长一样的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. 【树状数组】【P4113】[HEOI2012]采花

    Description 给定一个长度为 \(n\) 的序列,有 \(m\) 次询问,每次询问一段区间,求区间中有多少个数出现次数超过 \(1\) 次 Limitation \(n,~m~\leq~2~ ...

  2. 【数学/贪心/DP】【CF1088E】 Ehab and a component choosing problem

    Description 给定一棵 \(n\) 个节点的树,点有点权 \(a_u\),可能为负.现在请你在树上找出 \(k~(1~\leq~k~\leq~n)\) 个不相交集合,使得每个集合中的每对点都 ...

  3. 【DP】【CF1099C】 Postcard

    Description 给定一个长度为 \(n\) 的字符串,尽可能包含小写字母,字符 '?' 和字符 '*'.保证上面两种特殊字符若出现则一定出现在一个小写字母的后面一位.要求构造一个长度为 \(k ...

  4. 1: @override

    @Override是Java5的元数据,自动加上去的一个标志,告诉你说下面这个方法是从父类/接口 继承过来的,需要你重写一次,这样就可以方便你阅读,也不怕会忘记 @Override是伪代码,表示重写( ...

  5. Tensorflow训练神经网络

    以下代码摘自<Tensorflow实战Google 深度学习框架>. 由于这段代码包含了激活函数去线性化,多层神经网络,指数衰减学习率,正则化防止过拟合,滑动平均稳定模型等手段,涵盖了神经 ...

  6. Kubernetes Downward API

    目录 说明 环境变量方式 将pod信息注入为环境变量 将容器资源信息注入为环境变量 volume挂载方式 作用 说明 我们知道,每个Pod在成功创建出来之后,都会被系统分配唯一的名字.IP地址,并且处 ...

  7. PHP判断变量类型和类型转换的三种方式

    前言: PHP 在变量定义中不需要(不支持)明确的类型定义.变量类型是根据使用该变量的上下文所决定的.所以,在面对页码跳转.数值计算等严格的格式需求时,就要对变量进行类型转换. 举例如下: $foo ...

  8. (转)tomcat+nginx+redis实现均衡负载、session共享(一)

    在项目运营时,我们都会遇到一个问题,项目需要更新时,我们可能需先暂时关闭下服务器来更新.但这可能会出现一些状况: 1.用户还在操作,被强迫终止了(我们可以看日志等没人操作的时候更新,但总可能会有万一) ...

  9. Shell记录-Shell脚本基础（六）

    watch是一个非常实用的命令,基本所有的Linux发行版都带有这个小工具,如同名字一样,watch可以帮你监测一个命令的运行结果,省得你一遍遍的手动运行. 1．命令格式 watch[参数][命令] ...

  10. java内存溢出xms xmx

    java内存堆栈不够用时我们会寻求java参数-Xms和-Xmx的帮助,网上也有许多前辈给出了例子,但很多人喜欢把-Xms和-Xmx的值设置成一样的,甚至我还见过有吧-Xms设的比-Xmx还要大(-X ...