CSS3 animation-iteration-count 属性

实例

播放三次动画：

animation-iteration-count:3;
-webkit-animation-iteration-count:3; /*Safari and Chrome*/

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
animation-iteration-count	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

标签定义及使用说明

animation-iteration-count属性定义动画应该播放多少次。

默认值:	1
继承:	no
版本:	CSS3
JavaScript 语法:	object object.style.animationIterationCount=3

语法

animation-iteration-count: value;

值	描述	测试
n	一个数字，定义应该播放多少次动画	测试 »
infinite	指定动画应该播放无限次（永远）	测试 »

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画 永久运动 变色 移动 过渡</title>
<style>
div
{width:100px;height:100px;background:red;position:relative;animation-name:myfirst;animation-duration:5s;animation-timing-function:linear;animation-delay:2s;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:running;/* Safari and Chrome: */-webkit-animation-name:myfirst;-webkit-animation-duration:5s;-webkit-animation-timing-function:linear;-webkit-animation-delay:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;-webkit-animation-play-state:running;
}@keyframes myfirst
{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}@-webkit-keyframes myfirst /* Safari and Chrome */
{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body><p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p><div></div></body>
</html>

css3 动画【永久动画运动变色过渡】兼容处理相关推荐

CSS3: 利用分层动画让元素沿弧形路径运动
原文:Moving along a curved path in CSS with layered animation 翻译:涂鸦码龙译者注:部分代码示例在原文中可以看效果(作者写在博文里面了-), ...
html ie动画效果,css3强大的动画效果animate使用说明及浏览器兼容介绍
好久没更新blog,上次发文(11月8日)到现在刚好一个月,期间项目上的东西比较多,一时觉得时间比较紧,没来得及更新.这个星期总算是告一段落,补上几篇技术性的文章.好吧,第一篇是关于css3动画的使用 ...
CSS3过渡动画关键帧动画
一.过渡动画过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画. 所谓的状态就是指大小.位置.颜色.变形(transform)等等这些属性. Note:不是所有属性 ...
html5动态效果随鼠标动,html5+CSS3心形动画跟随鼠标光标运动特效
html5+CSS3心形动画跟随鼠标光标运动特效代码片段: this.update = function () { var lastPoint = { x: _this.x, y: _this.y ...
CSS3变形和动画：旋转、扭曲、缩放、位移、矩阵、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...
无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程. 旋转.扭曲.缩放.位移.矩阵 ...
CSS3动画(2D/3D转换、过渡、动画和多列)
[index.html] <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
css动画定义,CSS3中Animation动画的定义和调用
现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到.接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyf ...
不会做动画的程序猿不是好的动画师（如何用css3动画做动画）
"看清animation,transform, @keyframes,transition这四个的脸,以后这四个来了就是要做动画了,看好你们的网页,除了这四个,谁管你们都不好使." ...

css3 动画【永久动画运动变色过渡】兼容处理

CSS3 animation-iteration-count 属性

实例

浏览器支持

标签定义及使用说明

语法

css3 动画【永久动画运动变色过渡】兼容处理相关推荐

最新文章

热门文章

css3 动画【永久动画 运动 变色 过渡】兼容处理

CSS3 animation-iteration-count 属性

实例

浏览器支持

标签定义及使用说明

语法

css3 动画【永久动画 运动 变色 过渡】兼容处理相关推荐

最新文章

热门文章

css3 动画【永久动画运动变色过渡】兼容处理

css3 动画【永久动画运动变色过渡】兼容处理相关推荐