无论如何，animation用CSSanimation的省略号？
我试图让一个省略号animation，并想知道如果这是可能的CSSanimation…
所以可能是这样的
Loading... Loading.. Loading. Loading... Loading.. 基本上就是这样继续下去 有任何想法吗？
编辑：像这样： http : //playground.magicrising.de/demo/ellipsis.html
如何对@ xec的答案稍作修改： http : //codepen.io/thetallweeks/pen/yybGra
HTML
添加到单元的单个类：
<div class="loading">Loading</div>
CSS
使用stepsanimation。 请参阅MDN文档
.loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; -webkit-animation: ellipsis steps(4,end) 900ms infinite; animation: ellipsis steps(4,end) 900ms infinite; content: "\2026"; /* ascii code for the ellipsis character */ width: 0px; } @keyframes ellipsis { to { width: 20px; } } @-webkit-keyframes ellipsis { to { width: 20px; } }
@ xec的答案在点上有更多的滑入效果，而这允许点立即出现。
您可以尝试使用animation-delay property和每个省略号字符的时间。 在这种情况下，我把每个省略号字符放在一个<span class>这样我就可以分别对它们进行animation处理。
我做了一个演示 ，这是不完美的，但它至less表明了我的意思:)
我的例子中的代码：
HTML
Loading<span class="one">.</span><span class="two">.</span><span class="three">.</span>
CSS
.one { opacity: 0; -webkit-animation: dot 1.3s infinite; -webkit-animation-delay: 0.0s; animation: dot 1.3s infinite; animation-delay: 0.0s; } .two { opacity: 0; -webkit-animation: dot 1.3s infinite; -webkit-animation-delay: 0.2s; animation: dot 1.3s infinite; animation-delay: 0.2s; } .three { opacity: 0; -webkit-animation: dot 1.3s infinite; -webkit-animation-delay: 0.3s; animation: dot 1.3s infinite; animation-delay: 0.3s; } @-webkit-keyframes dot { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes dot { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } }
简短的回答是“不是真的”。 但是，你可以玩animation宽度和溢出隐藏，也许得到一个“足够接近”的效果。 （以下代码仅适用于firefox，根据需要添加供应商前缀）。
HTML
<div class="loading">Loading</div>
CSS
.loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; -moz-animation: ellipsis 2s infinite; content: "\2026"; /* ascii code for the ellipsis character */ } @-moz-keyframes ellipsis { from { width: 2px; } to { width: 15px; } }
演示： http : //jsfiddle.net/MDzsR/1/
编辑
它看起来铬与animation的伪元素的问题。 一个简单的解决方法是将省略号包装在自己的元素中。 退房http://jsfiddle.net/MDzsR/4/
即使一个更简单的解决scheme，工作得很好！
<style> .loading:after { display: inline-block; animation: dotty steps(1,end) 1s infinite; content: ''; } @keyframes dotty { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; } } </style> <div class="loading">Loading</div>
刚刚用animation编辑内容，而不是隐藏点…
在这里演示： https : //jsfiddle.net/f6vhway2/1/
编辑：感谢@BradCollins指出， content不是一个animation的属性。
https://www.w3.org/TR/css3-transitions/#animatable-css
所以这是一个WebKit / Blink / Electron only解决scheme。
那么实际上有一个纯CSS的方式做到这一点。
我从CSS技巧中得到了这个例子，但是也让它在Internet Explorer中得到了支持（我已经在10+中testing过了）。
检查演示： http : //jsfiddle.net/Roobyx/AT6v6/2/
HTML：
<h4 id="searching-ellipsis"> Searching <span>.</span> <span>.</span> <span>.</span> </h4>
CSS：
@-webkit-keyframes opacity { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } } @-moz-keyframes opacity { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } } @-webkit-keyframes opacity { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } } @-moz-keyframes opacity { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } } @-o-keyframes opacity { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } } @keyframes opacity { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } } #searching-ellipsis span { -webkit-animation-name: opacity; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -moz-animation-name: opacity; -moz-animation-duration: 1s; -moz-animation-iteration-count: infinite; -ms-animation-name: opacity; -ms-animation-duration: 1s; -ms-animation-iteration-count: infinite; } #searching-ellipsis span:nth-child(2) { -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; -ms-animation-delay: 100ms; -o-animation-delay: 100ms; animation-delay: 100ms; } #searching-ellipsis span:nth-child(3) { -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; -ms-animation-delay: 300ms; -o-animation-delay: 300ms; animation-delay: 300ms; }
