第一种方法： 
用计时器，设定一个和动画时长一样的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. java多线程 -- 线程八锁

    一个对象里面如果有多个synchronized方法,某一个时刻内,只要一个线程去调用其中的一个synchronized方法了,其它的线程都只能等待,换句话说,某一个时刻内,只能有唯一一个线程去访问这些 ...

  2. bzoj3203【sdoi2013】保护出题人

    题目描述 输入格式 第一行两个空格隔开的正整数n和d,分别表示关数和相邻僵尸间的距离.接下来n行每行两个空格隔开的正整数,第i + 1行为Ai和 Xi,分别表示相比上一关在僵尸队列排头增加血量为Ai  ...

  3. 使用EntitysCodeGenerate

    http://bbs.csdn.net/topics/360256700 public DataSet xxx(DateTime start, DateTime end, string type)   ...

  4. UDP ------ UDP 详解

    原文地址:https://zhuanlan.zhihu.com/p/25622691 3. UDP疑难杂症 3.1 UDP的传输方式:面向报文 面向报文的传输方式决定了UDP的数据发送方式是一份一份的 ...

  5. P1850 换教室

    P1850 换教室 现在有一张图, 有 \(v <= 300\) 个节点 你需要从 \(c_{1}\) 到 \(c_{2}\) 到 \(c_{n} (n <= 2000)\) 现在你有 \ ...

  6. 自动化工具制作PASCAL VOC 数据集

    自动化工具制作PASCAL VOC 数据集   1. VOC的格式 VOC主要有三个重要的文件夹:Annotations.ImageSets和JPEGImages JPEGImages 文件夹 该文件 ...

  7. vue相关安装命令

    安装cnpm npm install cnpm -g --registry=https://registry.npm.taobao.org

  8. layoutSubviews何时被调用

    layoutSubviews在以下情况下会被调用: 1.init初始化不会触发layoutSubviews 但是是用initWithFrame 进行初始化时,当rect的值不为CGRectZero时, ...

  9. ActiveMQ队列消息过期时间设置和自动清除解决方案

    版本 apache-activemq-5.15.3 1.消息过期设置 参数详情 1)message过期则客户端不能接收 2)ttlCeiling:表示过期时间上限(程序写的过期时间不能超过此时间,超过 ...

  10. CF&&CC百套计划2 CodeChef December Challenge 2017 Chef and Hamming Distance of arrays

    https://www.codechef.com/DEC17/problems/CHEFHAM #include<cstdio> #include<cstring> #incl ...