首页
学习
活动
专区
工具
TVP
发布

如何用JavaScript捕获CSS3动画事件

CSS3动画执行起来平滑且快速,但不像JavaScript动画,你可以一帧一帧控制。幸运的是,你可以在任何一个元素上使用事件处理来决定动画的状态。同时它支持连续播放不同动画这种细粒度的控制。...浏览器兼容性 在撰写本文时,Firefox,Chrome,Safari,Opera和IE10支持CSS3动画和相关联的事件处理程序。...事件对象作为单个参数传递。除了标准的属性和方法外,还提供: animationName:CSS3动画名称(即flash) elapsedTime:动画开始后以秒为单位的时间。...") >= 0) { ... } 这段代码就可以,例如,可以删除现有class或以特定顺序应用另一个CSS3动画。...更多来自本作者的内容 在JavaScript演示中查看CSS3动画事件 演示页面显示一个按钮。当它被点击时,“enable”类被切换开始flash动画。当动画事件触发时,状态显示在控制台中。

2K20

CSS3CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 )

一、CSS3 动画简介 " 动画 " 是 CSS3 相较于 CSS 的 颠覆性 特性 之一 ; 在 CSS3 中 , 可以设置 多个 动画节点 , 精确地 控制 一个动画 或 若干动画 , 实现 复杂...的 动效 ; 动画可以实现 : 过渡效果 更多变化 更多控制 自动播放 等效果 ; 二、CSS3 动画实现步骤 CSS3 动画 实现 步骤 : 首先 , 使用 @keyframes 定义动画 , 后面的..., 该动画将会在 1 秒内 把 将 标签元素 从右边 500px 位置 移动到 左边 0px 位置 ; 三、动画定义 ---- 动画定义语法 : @keyframes 动画名称 中定义的是 CSS 样式..., 可以定义一个由当前 初始状态 样式 逐渐 变为 终止状态 样式 的 动画效果 ; @keyframes 动画名称 { 0% { 动画初始状态 } 100% { 动画终止状态 }...} 使用 百分比 可以 定义 动画样式 变化 的发生时间 , 也可以使用 from 和 to 关键字 ; 动画序列 规则 : 0% 是 动画 的 开始状态 ; 100% 是 动画 的 终止状态 ;

16860
您找到你想要的搜索结果了吗?
是的
没有找到

css3 动画

3.5.4  动画 有人将HTML 5和CSS 3比做Flash的杀手,这是有原因的。...因为除了HTML 5能够实现矢量图形制作外,使用CSS 3还可以对图像进行更细致的操作,它新增了动画功能,要实现图像的变形等功能,只需要一行CSS就可以实现了。...那么结合HTML 5和JavaScript就可以将动画做得更美,效果完全可以接近Flash。但要想实现Flash的那种效果,还是需要下一定工夫的,但新增的动画功能 已经足够让人兴奋了。...通过下面这个例子,读者可以试验一下利用简单的CSS 3特性完成鼠标悬停时的动画效果,见代码清单3-19。...图3-29  CSS 3的动画效果 通过CSS 3中动画特征的高级用法,还可以创建移动、放大、缩小、矩阵变形等一系列动画效果。

2.3K20

CSS3 动画

CSS3 动画的创建有两步:① 定义 CSS3 关键帧 keyframes;② animation 调用 keyframes,并设置动画属性(将动画绑定到需要做动画的标签中)我们在使用 transition...,还要通过 animation 来定义动画的持续时间,动画的执行次数等一系列属性animation: myfirst 5s linear 2s infinite alternate;animation:...animation-direction;animation-name 动画名称,此处的名称就是刚才我们定义关键帧时取的名字animation-duration 动画执行时间,单位为秒或毫秒animation-timing-function...变换方式animation-delay 延迟,规定这个动画可以在延迟指定时间后再执行,单位为秒或毫秒animation-iteration-count 动画执行次数,无限次为 infiniteanimation-direction...运动方向,默认值为 normal,动画的每次循环都是向前播放;另一个值是 alternate,动画在奇数次正常播放,偶数次反向播放,即轮流反向播放

70420

CSS3 动画

动画 动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。...相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。 1.1 动画的基本使用  制作动画分为两步:   1.先定义动画   2.再使用(调用)动画 1....:200px; } } 动画序列   1>0% 是动画的开始,100% 是动画的完成。...这样的规则就是动画序列。   2>在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。   3>动画是使元素从一种样式逐渐变化为另一种样式的效果。...: 持续时间; } 1.2动画常用属性  1.3 动画简写属性   animation:动画名称 持续时间 运动曲线  何时开始  播放次数  是否反方向  动画起始或者结束的状态;   animation

40520

CSS3CSS3 动画 ④ ( 使用动画制作地图热点图 )

一、需求说明 实现如下效果 , 在一张地图上 , 以某个位置为中心点 , 向四周发散 ; 核心 是实现 向四周 发散 的 波纹动画 ; 二、动画代码分析 1、地图背景设置 地图背景设置 : 地图 是...分析 热点动画 , 发现内层的 蓝色实心 小圆圈 是不变的 , 始终都存在 ; 然后放置 2 ~ 3 个 可缩放的原型图片 作为 热点动画的 波纹 ; 页面的布局如下 : 其中的 dot 盒子是 中心小圆点...动画实现如下 : 波纹效果动画 , 就是将 盒子模型 的大小 , 逐渐设置到 100 像素 , 中间可以设置若干动画节点 ; @keyframes bowen {...秒 和 1 秒 执行 ; 注意 选择器 的提权使用 , 之前使用了 .city div[class^="bowen"] 选择器 设置了动画属性 , 如果设置动画延迟属性的选择器优先级低于前者选择器 ,...maximum-scale=1.0,minimum-scale=1.0"> CSS3

20120

动画(CSS3) animation

动画CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。 动画序列 0%是动画的开始,100%是动画的完成。这样的规则就是动画序列。...动画基本使用 先定义动画 再调用动画 动画简写格式: animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束方向; 属性 描述 @keyframes...规定动画。...动画以低速开始,然后加快,在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。... 动画时间 运动曲线  何时开始  播放次数  是否反方向; */             /* 元素可添加多个动画,用逗号分隔 */             /* steps(步数),动画分几步完成

86440

CSS3动画animation

animation和上次说的transform动画有点不同,需要进行定义动画规则,而animation则无需受体,自动执行动画,translation则需要某个动作执行才进行动画!...0.5s infinite; 第一个参数是这个运动的规则,第二个指定该运动的执行时间 第三个参数指定运动曲线(linear匀速) 第四个是一个完整动作执行完毕后延时(暂停时间),infinite(重复)动画是否重复...; 一般只需要指定动画规则和运动时间这个动画就可以正常执行!...width:600px; } 100%{ width:300px; } } @keyframes是执行规则定制开头,第二个run是在animation时候定义的动画规则名字....一个动画从0%到100%执行一次,100%到0%过程(则为反转alternate) 如果指定alternate(反转)则第1,3,5,7...奇数次运动则为顺时针(正向),2,4,6,8,10...

63230

CSS3 动画属性

CSS3 动画 虽然transition在一定的时间内可以实现元素的初始状态在指定的时间范围过渡最终状态, 模拟一种过渡动画效果,但它的功能是非常有限的。...因此,CSS3 新增了一个动画属性animation。...与过渡属性transition属性不同的是,CSS3 的animation属性可以像Flash制作动画一样,通过关键帧控制动画的每一步, 实现更为复杂的动画效果。...CSS3中通过animation实现动画和transition实现动画非常类似,都是通过改变元素的属性值来实现动画效果的。...CSS3动画属性animation和CSS3的transition属性一样是一个复合属性,它包含了8个属性: animation-name,主要用来指定一个关键帧动画的名字,这个动画名必须对应一个@keyframes

1.1K20

CSS3 动画—transition

CSS3 过渡属性被封装在 transition 规范中,过渡的意义在于,给了 CSS 时间轴的概念,在此之前所有的 CSS 状态变化都是瞬间完成的。...CSS3 transition 规范定义了以下四个 CSS 属性: transition-delay(过渡延迟时间) transition-duration(过渡持续时间) transition-property...transition 结合 transform 使用 transition 结合 transform 能够完成一些简单的动画效果 使用 transition 做动画简单易用,不过也存在一些缺点: (1)...动画需要事件触发 (2) 动画只能执行一次 (3) transition 只能定义开始状态和结束状态,不能定义中间状态 因此如果想要完成比较复杂的动画,还是要用 css3 中的 animation...参考资料 CSS动画简介 MDN-Using CSS transitions

28430

玩转CSS3动画

因公司业务需要在Android WebView上增加对CSS3动画的支持,所以就先研究了一下CSS Animations。...什么是 CSS3 动画CSS3动画就是让元素逐渐从一种风格变为另一种风格。您可以根据需要更改任意数量的CSS属性,次数没有限制。要使用CSS动画,您必须首先为动画指定一些关键帧。...动画的主要组成部分 CSS动画由两个基本部分组成: 关键帧 - 定义动画的阶段和样式。 动画属性 - 将@keyframes分配给一个特定的CSS元素并定义它如何动画。...动画属性做两件事: 将@keyframes分配给要动画的元素。 定义它是如何动画的。 动画属性被添加到您想要动画的CSS选择器(或元素)。...示例: .div:hover { animation-play-state: paused; } 测试结果 使用Android 4.3系统进行测试,webkit内核浏览器对CSS3动画支持的情况如下:

63020
领券