第一种方法： 
用计时器，设定一个和动画时长一样的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. .NET MVC 获取 当前请求的 控制器/视图/区域 的名字

    .NET MVC 在action中或过滤器中或视图中,分别如何获取  当前请求的  控制器/视图/区域  的名字 1)过滤器中的: public class CMSAttribute : Filter ...

  2. bug2 The method of type must override a superclass method解决方式（去掉@override可以）

    @Override 时出错误: 解决办法是: 一.                                                                     因为你的Co ...

  3. 完美配置Python3.5+Anaconda+PyQt5，实现UI和其他模块的结合

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...

  4. HTTP返回代码 403 404 500等代表的含义

    在网站日志中,我们经常会看到很多返回的http代码,如201.304.404.500等等.可是这些具体的返回的HTTP代码究竟什么含义呢,在此做一下知识普及吧,记不住不要紧,到时候看看就行了,但最主要 ...

  5. highCharts使用记录

    公司的架构师让我做一个mockup,要用到highCharts,,以前想接触的,没时间学习,也没有用过,正好工作可以用上了,可以边学边做了. 环境 <script src="./js/ ...

  6. git提示error setting certificate verify locations解决办法

    先打开git bash窗口 执行命令: git config --system http.sslcainfo "C:\Program Files (x86)\git\bin\curl-ca- ...

  7. MUI项目基础框架

    码云SVN仓库地址:https://gitee.com/lim2018/vx/tree/master MUI项目基础框架,底部导航栏切换 目录结构 index为入口页主体,sub1-4为要切换的子页面 ...

  8. 20145202马超 2016-2017-2 《Java程序设计》第三次实验

    实验三 敏捷开发与XP实践 http://www.cnblogs.com/rocedu/p/4795776.html, Eclipse的内容替换成IDEA 在IDEA中使用工具(Code->Re ...

  9. 【codeforces】【比赛题解】#948 CF Round #470 (Div.2)

    [A]Protect Sheep 题意: 一个\(R*C\)的牧场中有一些羊和一些狼,如果狼在羊旁边就会把羊吃掉. 可以在空地上放狗,狼不能通过有狗的地方,狼的行走是四联通的. 问是否能够保护所有的羊 ...

  10. aarch64_o1

    OCE-devel-0.18.1-1.fc26.aarch64.rpm 2017-05-16 03:37 5.4M fedora Mirroring Project OCE-draw-0.18.1-1 ...