CSS3 的动画效果强大，在移动端使用广泛，动画执行开始和结束都可以使用JS来监听其事件。

  1. animationstart
  2. animationend

以下是一个示例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

    <meta content="yes" name="apple-mobile-web-app-capable">

    <meta content="black" name="apple-mobile-web-app-status-bar-style">

    <meta content="telephone=no" name="format-detection">

    <meta content="email=no" name="format-detection">

    <title>CSS3 动画事件</title>

    <style type="text/css">

		h1 {

		  animation-duration: 3s;

		  animation-name: slidein;

/*		  animation-iteration-count: infinite;

          animation-direction: alternate;		*/

		}

		@keyframes slidein {

		  from {

		    margin-left: 100%;

		    width: 100%;

		  }

		  to {

		    margin-left: 0%;

		    width: 100%;

		  }

		}

    </style>

</head>

<body>

	<h1 id="ani">Test CSS3 SlideIn</h1>

	<script>

		ani.addEventListener('animationstart', function() {

			console.log('animate start')

		}, false);

		ani.addEventListener('animationend', function() {

			console.log('animate end')

		}, false);

	</script>

</body>

</html>

通过添加动画事件，可以依次把一些图片展示出来。

相关：

http://www.w3.org/TR/css3-animations/#animation-events

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

CSS3动画事件的更多相关文章

  1. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  2. css3 animation动画事件

    当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart  //动画開始 An ...

  3. CSS3动画以及animation事件

    1.CSS3动画以及animation事件的定义 animation :name duration timing-function delay iteration-count direction an ...

  4. 用CSS3动画，让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  5. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  6. CSS3 动画实现 animation 和 transition 比较

    在 CSS3 中有两种方式实现动画, 分别是 animation 和 transition, 他们都有以下功能 根据特定 CSS 属性进行动画 设定属性变化的 timing function 设定动画 ...

  7. CSS3动画（个人理解）

    随着学习的深入,越来越觉得Css3动画的重要,虽然JQ自定义动画和动画回调函数必须掌握,但是css3动画做起来更加绚丽,更加方便!1.常规使用1.1 使用transition属性,一般我们是配合hov ...

  8. CSS3 动画基础

    该文为译文转载,原文地址:http://tech.163.com/mobile/10/0106/09/5SB96QSM00112K88.html   译文:你需要知道的CSS3 动画技术 原文:Wha ...

  9. CSS3学习（CSS3过渡、CSS3动画）

    CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...

随机推荐

  1. OpenCV2:图像的几何变换,平移、镜像、缩放、旋转(1)

    图像的几何变换是在不改变图像内容的前提下对图像像素的进行空间几何变换,主要包括了图像的平移变换.镜像变换.缩放和旋转等.本文首先介绍了图像几何变换的一些基本概念,然后再OpenCV2下实现了图像的平移 ...

  2. 用大白话聊聊JavaSE -- 自定义注解入门

    注解在JavaSE中算是比较高级的一种用法了,为什么要学习注解,我想大概有以下几个原因: 1. 可以更深层次地学习Java,理解Java的思想. 2. 有了注解的基础,能够方便阅读各种框架的源码,比如 ...

  3. Windows Phone 的 TextBox 的实现 PropertyChanged

    比如,View 的文本框 TextBox1 绑定了 ViewModel 的 Msg 属性, 当想把文本框输入的内容输入过程中实时更新到绑定的 Msg ,在Windows Phone 中是无法通过设置  ...

  4. iOS中获取cell中webview的内容尺寸

    最近项目中遇到在cell中获取webView的内容的尺寸的需求 实现的思路其实很简单 就是通过执行js 获取尺寸即可 为了后面用着方便我直接封装了一个HTML的cell 起名就叫 STHTMLBase ...

  5. redux+flux(一：入门篇)

    React是facebook推出的js框架,React 本身只涉及UI层,如果搭建大型应用,必须搭配一个前端框架.也就是说,你至少要学两样东西,才能基本满足需要:React + 前端框架. Faceb ...

  6. Win10 UWP系列：更新UWP时注意的问题——TargetDeviceFamily

    前几天把CurrencyExchanger提交到微软参加Master认证,结果没有通过,反馈了一些错误,看来微软检查还是比较仔细的. 错误主要有: Visual feedback helps user ...

  7. membership与成员资格

    membership成员资格是ASP.NET 成员资格为您提供了一种验证和存储用户凭据的内置方法.因此,ASP.NET 成员资格可帮助您管理网站中的用户身份验证.它包含以下功能 创建新用户和密码. 将 ...

  8. 应用程序启动管理 Winform版

    ★前言      开发这个小工具的想法主要是机器中安装了数据库,每次设置开机启动数据库服务的话,则系统启动很慢,每次都得手动到服务管理器中停止服务,很是繁琐,相信不少做开发的朋友会遇到同样的问题,就有 ...

  9. IM聊天系统

    先上图片: c# 客户端,openfire服务端,基于java开源推送服务开发的及时聊天系统.大概功能有,单点消息支持文本/图片/截图/音频/视频发送直接播放/视频聊天/大文件传输/动态自定义表情等. ...

  10. SSH整合(struts2.3.24+hibernate3.6.10+spring4.3.2+mysql5.5+myeclipse8.5+tomcat6+jdk1.6)

    终于开始了ssh的整合,虽然现在比较推崇的是,ssm(springmvc+spring+mybatis)这种框架搭配确实比ssh有吸引力,因为一方面springmvc本身就是遵循spring标准,所以 ...