&nbs p;
一、同步/异步操作的等待提示
一个名叫“阿贾克斯”的屌丝男在名为“客户端”的学校上学，为了追女神，下狠心，借了高利贷给女神买Mac. 结果，期限已到，要债的找上门，没办法，只能向身在“服务器端”的父母要钱。但是，要钱是要一定的过程和时间的。他必须想办法向要债的表明，钱正在过来的过程中，否则，可能要债的会认为你在忽悠，直接使大招——”Ctrl+W”，瞬间灭了你，眼不见心不烦。
如何告知钱正在过来的过程中呢？
有人可能如下处理，弄个转转转的小图片告诉要债的，看，我在原地不停地转，一直转到钱过来，否则我一刻都停不下来~~
类似下面效果（点击这里亲自体验）：
转转转的告知方法优点在于动作大，效果显著。不足在于动作大，实现成本比较高。考虑到IE6~IE8的兼容，如是否撑开按钮高度，是否影响域后面文字的对齐（vertical-align的解析不规范是最麻烦的）等，或者再套标签背景图片式定位等，这种提示一般只能在某些特定的重要的场合使用使用，要想一个模子走到底，此方法严重不推荐。
要是我，直接把手机拿出来，给要债的看父母的短信——“钱汇来中…”
虽然没有惊天地泣鬼神，但是从功能作用上来讲完全够了。
若按钮为提示对象，我的做法是：在按钮默认文字后面加上“中…”或使用宽泛描述“处理中…”（实现整合在组件中）（按钮宽度自适应为前提），例如下面这个：
然而，文字描述虽然具意，但毕竟是静态的，一般情况下，我们的请求时间都是很短的，数秒已经是极限，因此，这种提示完全够用，多半恰到好处。然而，总会遇到堵车的情况——父母没有网银，需要去银行汇款，结果公交车遇到极端主义者汽油烧车，逃命要紧，哪里赶得上汇钱给儿子呢！
但是讨债的那边不知道啊，“钱汇来中…”后等了半个小时，没有其他信息，说不定就等不及，又一次使大招——”Ctrl+W”，瞬间灭了你，眼不见心不烦。
但是，如果信息是动态的，每10分钟自动发过来条类似短信，要债的估计会耐心等的。考虑到现实，父母老人家顾着逃命，还要时不时发个信息过来，有点难为他们老人家了……
在Gmail中，一个请求如果时间很长，它会在中途有如下提示：“仍在加载中…”。从“加载中…”到“仍在加载中…”的提示文字变化，个人觉得会大大 较少 减小撕票的可能性。这种nice体验的交互我在手机项目中是经常使用的（考虑到经常会信号不好）。
PC上也是可以类似处理，例如，请求（假设超时设置30秒）发送后可以设定一个 5 秒的定时器，如果请求有返回，清除定时器；如果没有返回，按钮文字修改为“仍在处理中…”；再过 5 秒还没有返回，提示可以是“网络较慢，耐心等待…”等……然后继续 5 秒~~
我们搞这些名堂的目的都是要把“请求中…”提示从纯静态向动态方向靠拢。昨天在折腾某某东西的时候（具体什么已经不记得了），不知为何，脑子突然冒出，诶，是不是可以渐进使用 CSS 3 animation ，让提示最后的 三个点 " .. ." 以动画形式呈现，纯字符形式的动画，面向 视网膜 屏幕，同时无请求，对于 25% Ch rom e浏览器用户以及其他众多移动设备浏览器用户，岂不是 细节 体验上的一次 提升 。
这里的点点点动画效果指的是下图gif动态所演示的效果：
二、CSS3 animation与点点点等待动画效果
上gif实现的CSS代码如下：
.ani_dot { font-f ami ly: simsun; } :root .ani_dot { /* 这里使用Hack是因为IE6~IE8浏览器下， vert ical -align 解析不规范，值为 bottom 或其他会 改变 按钮的实际高度*/ dis play : inline-block; width: 1.5em; vertical-align: bottom; overflow: hidden; } @- webkit -keyfr am es dot { 0% { width: 0; m arg in-right: 1.5em; } 33% { width: .5em; mar gin -right: 1em; } 66% { width: 1em; margin-right: .5em; } 100% { width: 1.5em; margin-right: 0;} } .ani_dot { -webk IT -animation: dot 3s infinite step -s tart; } @keyframes dot { 0% { width: 0; margin-right: 1.5em; } 33% { width: .5em; margin-right: 1em; } 66% { width: 1em; margin-right: .5em; } 100% { width: 1.5em; margin-right: 0;} } .ani_dot { animation: dot 3s infinite step-start; } 而 HTML 很 简单 了：
提交订单中<span class="ani_dot">...</span>
demo
您可以狠狠地点击这里：animation渐进实现点点点动画效果demo
点击demo中下图所示的按钮，效果即出现：
一些说明：
IE10+以及其他浏览器，点点点动画 消失 (better)，IE6 -i E9是普通的点点点文字(ok as usual)~~ 英文结束字符，也就是键盘逗号和斜杠旁边的字符 . 在simsun字体下(貌似就是 宋体 )，所占据的 宽 度在FireFox/C hr ome浏览器下，是当前字体大小的1/2，也就是 0.5em-1px ，在IE浏览器下几乎等于1/2，也就是 0.5em ，我的系统是win7. 不知Mac中 是否 也有如此表现。目前，支持 animation 的IE10浏览器以及FireFox21已经无需私有前缀了。目前我使用的Chrome25尚未脱离~ 这也使得渐进使用CSS3的一些更高级特性在代码量 成本 大又减少了！ 我起初想使用 text-indent 控制，后发现每个字符的间距无法100%精确控制，IE10与FireFox/Chrome似乎有 1px 差异，于是，改成的保险的 width + margin 控制，如果你希望宽度动态可变，直接 width 即可。 一般的 animation 动画都是连续的，我们这里需要点点点效果是要一帧一帧的， step-start 就是用来实现该功能的，后面会有简单介绍。 animation 缩写的时候，各个属性的顺序其实大可不必在意，貌似浏览器会自己寻找匹配的关键字。到是两个时间——动画周期时间和动画延迟时间——需要前者在前，后者 在后 。 :root 为IE9+以及其他现代浏览器Hack, IE6-7甚至IE8下， inline-block 水平元素的vertical-align:bottom解析与 inline 水平是有差异的，会导致高度撑开，因此， display: inline-block 要hack处理，至于其他，实际都无所谓的。
三、animation的一些参数
animation-name就是 @keyframes 后面跟着的动画名称，本demo本文中名为 dot ， 意思 为“点”。 animation -t iming-function
定义动画播放的方式，参数设置类似 transition-timing-function .
常见缓动类型有：先快后慢(OOXX-out)，还是后快先慢(OOXX-in)，还是中间快两头慢(OOXX-in-out)——( OOXX = ease )。这个邪恶记法以前介绍过，不好意思展开解释 。
而这里使用的是 step-start , 顾名思意，“一步一步 开始 ”，表现在动画中就是一帧一帧播放、一顿一顿画面；有时候就是需要这样的效果哦！ animation-iteration-count
顾名思意：“动画迭代次数”。默认就 1 次，当然，我们可以设置 2 次， 3 次， 4 次，& # 8230; 这辈子撸的数目 次。如果撸的次数实在太壮观，建议使用 infinite 关键字，表示无限、无穷无尽，撸到天荒地老，铁杵成针！本demo就是这么干的~~
animation-duration
指一个动画周期持续时间。单位秒 s 或毫秒 ms . animatin-delay
指动画延时执行时间。单位秒 s 或毫秒 ms . animation-direction
指动画时间轴上帧前进的 方向 。默认为 normal , 表示一路向前，往前播放。另外可选值 alternate ，表示动画往前播放完了之后，然后再倒带，倒带到头了再往后播放，来来回回~~
本demo如果应用 alternate 值，那效果就会是：一个点→两个点→三个点→三个点→两个点→一个点……；而不是目前展示的一个点→两个点→三个点→一个点→两个点→三个点…… animation-fill-mode
顾名思意，“动画填充模式”，啥子意思呢？我们装修时候，都见过铺地面砖或地板的，地砖与地砖时间只有缝隙的，我们需要填充，如何个填充法，我们就称之为“填充模式”。
一个动画周期就好比 一块 地面砖，动画与动画周期之间就会存在类似的缝隙， animation-fill-mode 就是确定动画遭遇缝隙时如何“填充”的。一图胜千言：
由图可见（网上的解释都TM简单的敷衍）：
none （默认值），表示动画应用之时、动画延时执行之前之前、以及动画结束之后，元素呈现的都是默认状态。 forwa rds ，前进，表示动画结束后，元素就是当前动画结束时候的状态。对应 keyframe 中的 "to" 或 "100%" 帧。如果应用 alternate 值，同时无限或偶数次数动画，此时最终 keyframe 是 " From " 或 "0%" 关键帧。 backwards ，返回，表示动画开始之前，元素处于 keyframe 是 "from" 或 "0%" 关键帧的状态。由于大多数动画的 animatin-delay 为0, 由于没有指定 forwards 状态(如： both 值)，因此我们视觉上看到的表现是：动画结束后，动画回到了起始关键帧状态；实际是 动画开始之前就如此，而不是结束 ，万万不可被此假象误导。要想看清现实，可以设置 animation-delay 为非 0 值，我们就可以看到动画开始之前，元素就是 "0%" 起始关键帧状态，而不是元素默认状态。直观且准确反映了 backwards 的准确释义。
实际应用中， animation-delay 设置了非 0 值，同时不是 step-start 动画形式，此参数 慎用 ，除非元素默认状态就是起始帧状态，否则动画犹如抽风了一样~ both ， forwards 和 backwards 双P, 这是个略考智商的属性，既当爹又当妈的，这可怎么搞！好搞的，如果要求同一时间既爹又妈，你不是人妖，搞不来。但是白天当爹，晚上当妈，我想相对容易多。这里也是如此， both 是 与 的关系，中文意思是“同时”，表示：动画开始之前是 "from" 或 "0%" 关键帧；动画完成之后是 "to" 或 "100%" 关键帧状态。 animation-play- stat e
动画运行状态，属性为： running （默认）以及 paused . 这个什么时候有用的，使用 animation 实现视频播放效果的时候。视频播放？没错，诸位out了吧，并不是HT ML 5 video 才可以玩转视频哦~~不多讲，啦啦啦啦啦~~
四、最后说点什么吧
目前webkit浏览器还需要私有前缀，要不然，我立即放在实际项目中使用了。目前的CSS的代码量，虽然不多，但还是超过自己的忍受程度（代码洁癖啊），而且就功能来讲就是点点点效果，虽然全局公用，但功能点狭隘。
不过 ，在折腾这篇 文章 的时候，我有了另外的idea，对于这些现代浏览器渐进增强的CSS，我可以放在一个独立的CSS文件中，然后在页面完成后，或一段时间后，或触发某些条件后，Ajax请求这些CSS字符（如本地木有），干什么呢？使用 localStorage 存储在本地，永久存储（当然，版本控制机制还是要有的）。这样，哥就 不用 担心这些渐进的CSS撑大的基本CSS大小，也一定程度上避免了N请求。由于是渐进增强的东西，因此，即使本地读取速度比从内存差几个档次，也没关系（至少比从 服务器 请求快吧）。哟，还不错哦~
诶，自己又想到，直接使用 media query 查询调用CSS是不是也不错，把渐进CSS放在其中， media query 只是个浏览器过滤器，好像也不错。恩，都去试试，都去研究研究~~
本文是偶然想法之后一番折腾的展示、多有卖弄之嫌，然成熟之后，定会实际项目中使用。也希望这里东扯西扯的文字能够对您的工作、学习有所启发。也欢迎分享你认为不成熟的想法，什么东西都是从无到有的，互相探讨，在CSS3以及HTML5风起 云 涌的浪尖开辟 全新 的道路——哪怕是羊肠小道，时代的弄潮人不一定是技 术 最牛的，而是敢想敢做的。
明儿个就端午了，很多亲们今天就回家了，估计本文发布后，就像掉入窨井盖的花季少女，沉了，个把月后才以“死尸状”浮现出来。哈哈，…………………… 唉，我自己在这里自言自语个什么，好无聊哦~~
大家端午节快乐！
五、 重要 更新于2013-06-13
@玉面小飞鱼在评论中提到关于 进度 的想法，很好的想法，而且自己立马就有了idea. 使用CSS animation 模拟进度条效果。
我们先看效果吧：
您可以狠狠地点击这里：CSS animation模拟进度条等待效果demo
demo中三个按钮，第一个按钮模拟超时；第二个为请求小图片（快速loading效果）；第三个为请求大图片（缓慢请求loading效果，明显进度条效果）。
截图看不出效果的 精髓 的，建议IE10+, FireFox, Chrome26+下亲自体验效果。
CSS animation 相关代码如下：
.ani_ PR og: :after { padding-right: 0%; background-color: #34538b; background-clip: content-box; box-sizing: border-box; animation: progress 30s; } @keyframes progress { 0% { padding-right: 100%; } 1% { padding-right: 50%; } 3% { padding-right: 30%; } 10% { padding-right: 20%; } 20% { padding-right: 8%; } 30% { padding-right: 5%; } 40% { padding-right: 4%; } 60% { padding-right: 2%; } 80% { padding-right: 1%; } }} 从代码可以看出：
进度条为伪元素创建， :: before , ::after 正好被支持 animation 的浏览器支持，因此，无需Hack打 补丁 ，很好很好！ 进度条动画最长时间为 30s ; 进度条 开始进度相当快 ，以应付实际等待时间大多不超过1秒的情况；到后来就越来越慢，但是，仍然有进度，用户会 知道 仍在加载中，不会中途抛弃。换句话说，此进度条只是一个迷惑“要债”的假的进度条，但是，效果绝对杠杠的。个人 觉得 Gm ai l中的进度条效果，也有这种假象之嫌。CSS中还有一个重要一段：
/* 等待结束直接到底显示 */ .ani_prog_finish::after { animation: none; } 页面的等待操作得到成功反馈的时候，建议加上这个类名，作用很简单，让进度条的过程完整（去除animation动画，直接显示最终效果）。否则，如果请求速度较快快，用户会感觉进度条只进行了一 半 ，就成功了，有些不自然。
demo中请求小图，虽然请求过程很短，但是依然可以明显看到进度条100%显示之后才隐藏的。
CSS驱动的进度处理，JS仅控制起始与结束状态，成本不高，个人觉得还是很实用的，您可以试试，至少我会在手机、甚至PC上尝试的。
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-小tip: CSS3 animation渐进实现点点点等待提示效果 全部内容，希望文章能够帮你解决 html5教程-小tip: CSS3 animation渐进实现点点点等待提示效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-小tip: CSS3 animation渐进实现点点点等待提示效果的详细内容...