CSS3 动画触发事件
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
} @-moz-keyframes mymove /* Firefox */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
} @-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
} @-o-keyframes mymove /* Opera */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
} #animation {
animation:mymove 5s 5;
-webkit-animation:mymove 5s 5; /* Safari 和 Chrome */
}
<div id="animation" style="width: 100px;height: 100px;background-color: #0baae4">Test content</div> <ul id="output"></ul>
var el = document.getElementById("animation"); el.addEventListener("animationstart", listener, false);
el.addEventListener("animationend", listener, false);
el.addEventListener("animationiteration", listener, false); function listener(e) {
var li = document.createElement("li");
switch(e.type) {
case "animationstart":
li.innerHTML = "Started: elapsed time is " + e.elapsedTime;
break;
case "animationend":
li.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
break;
case "animationiteration":
li.innerHTML = "New loop started at time " + e.elapsedTime;
break;
}
document.getElementById("output").appendChild(li);
} el.addEventListener("click",he,false);
function he() {
if(el.style.webkitAnimationPlayState == "paused"){
el.style.webkitAnimationPlayState = "running";
}else{
el.style.webkitAnimationPlayState = "paused";
} }
CSS动画有以下三个事件。
animationstart事件:动画开始时触发。
animationend事件:动画结束时触发。
animationiteration事件:开始新一轮动画循环时触发。如果animation-iteration-count属性等于1,该事件不触发,即只播放一轮的CSS动画,不会触发animationiteration事件。
animation-play-state属性可以控制动画的状态(暂停/播放),该属性需求加上浏览器前缀。
原文链接:http://javascript.ruanyifeng.com/dom/css.html#toc15
CSS3 动画触发事件的更多相关文章
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
- CSS3动画以及animation事件
1.CSS3动画以及animation事件的定义 animation :name duration timing-function delay iteration-count direction an ...
- CSS3动画事件
CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...
- 按钮在执行frame动画的时候怎么响应触发事件?
按钮在执行frame动画的时候怎么响应触发事件? 代码中效果(请注意,我并没有点击到按钮,而是点击到按钮的终点frame值处): 对应的代码: // // ViewController.m // Ta ...
- 设计能长按并有动画效果且能触发事件的高级view
设计能长按并有动画效果且能触发事件的高级view 效果图: 源码: LongTapAnimationView.h 与 LongTapAnimationView.m // // LongTapAnima ...
- 详解css3 pointer-events(阻止hover、active、onclick等触发事件来
pointer-events 更像是JavaScript,它能够: 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的 hover 和 active 状态的变化触发事件 阻止Jav ...
- css3 pointer-events(阻止hover、active、onclick等触发事件)
pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target. /* Keyword values */ pointer-events: ...
- 用CSS3动画,让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
随机推荐
- c\c++复习基础要点08--c++单例模式
单例模式有许多种实现方法,在c++中,甚至可以直接用一个全局变量做到这一点,但是这样的代码显得不优雅.使用全局对象能够保证方便地访问实例,但是不能保证只声明一个对象——也就是说除了一个全局实例外,仍然 ...
- python数据库做成邮箱的注册系统!
#! /usr/bin/env python2.7 # -*- coding:utf-8 -*- #File:w7.py #Date:2013-7-18 #Author:wangyu import r ...
- Java基础知识强化65:基本类型包装类之Integer的构造方法
1. Integer类概述 (1)Integer类在对象中包装了一个基本类型 int 的值,Integer类型的对象包含一个int类型的字段. (2)该类提供了多个方法,能在int类型和String类 ...
- Archlinux 从 AUR 源中安装应用
Archlinux 从 AUR 源中安装应用 AUR((Arch 用户软件仓库) Arch用户软件仓库( Arch User Repository,AUR )是为用户而建.由用户主导的Arch软件仓库 ...
- 判断Http请求由手机端发起,还是有电脑端发起
某些情形,我们需要判断Http请求是来自手机端还是电脑端,关键是取得User-Agent的信息,进行筛选判断即可. 核心类如下: public static boolean isMobileDevic ...
- html5 canvas画进度条
这个ie8的兼容是个问题,ie8 的innerHTML有问题啊,添加两个附件吧 <!DOCTYPE html> <html> <head> <meta cha ...
- 填坑 - 使用Entity Framework 6 + Sqlite进行DB first开发
Sqlite团队也是渣啊,到第6代了还不支持Code First. 1.安装运行环境和组件 .安装SQLite的Visual Studio设计器支持 只有安装了它,在[新建ADO.NET实体数据模型] ...
- Linux下的静态IP配置【weber出品】
配置Linux下的静态IP地址 因为服务器的IP地址是固定的,不像我们自己家的笔记本的IP是动态的.所以我们要将这个地址给写成静态的. 直接编辑这个这个配置文件即可: vi /etc/sysconfi ...
- SQL SERVER 分页方法
最近项目中需要在SQL SERVER中进行分页,需要编写分页查询语句.之前也写过一些关于分页查询的语句,但是性能不敢恭维.于是在业务时间,在微软社区Bing了一篇老外写的关于SQL SERVER分页的 ...
- myEclipse笔记(1):优化配置
一.设置字体 Window->Preferences->General->Appearance->Colors and Fonts 在右侧找到”Aa Test Font”双击或 ...