无论如何使用CSS动画制作省略号动画？

Question

我正在尝试使用省略号动画,并且想知道CSS动画是否可行......

所以它可能就像

Loading...
Loading..
Loading.
Loading...
Loading..

基本上就这样继续下去.有任何想法吗？

编辑:像这样:http://playground.magicrising.de/demo/ellipsis.html

Answer 1

如何稍微修改一下@ xec的答案:http://codepen.io/thetallweeks/pen/yybGra

HTML

添加到元素的单个类:

<div class="loading">Loading</div>

CSS

使用的动画steps.请参阅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的答案对点有更多的滑入效果,而这可以让点立即出现.

Answer 2

您可以尝试使用animation-delay property每个省略号字符的时间和时间.在这种情况下,我将每个省略号字符放在一个<span class>所以我可以单独为它们设置动画.

我做了一个演示,这不是完美的,但它至少显示了我的意思:)

我的例子中的代码:

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;
    }
}

Answer 3

即使是更简单的解决方案,也能很好地运行!

<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>

刚用动画编辑内容而不是隐藏一些点......

在这里演示:https://jsfiddle.net/f6vhway2/1/

编辑: 感谢@BradCollins指出这content不是一个可动画的属性.

https://www.w3.org/TR/css3-transitions/#animatable-css

所以这是一个仅限WebKit/Blink/Electron的解决方案.(但它也适用于当前的FF版本)

Answer 4

简短的回答是"不是真的".但是,您可以使用动画宽度和溢出隐藏,并可能获得"足够接近"的效果.(下面的代码仅针对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/

编辑

看来chrome有动画伪元素的问题.一个简单的解决方法是将省略号包装在自己的元素中.查看http://jsfiddle.net/MDzsR/4/

Answer 5

添加较晚，但我找到了一种支持居中文本的方法。

<element>:after {
    content: '\00a0\00a0\00a0';
    animation: progress-ellipsis 5s infinite;
}

@keyframes progress-ellipsis {
    0% {
        content: '\00a0\00a0\00a0';
    }
    30% {
        content: '.\00a0\00a0';
    }
    60% {
        content: '..\00a0';
    }
    90% {
        content: '...';
    }
}

Answer 6

您可以制作动画（如果不需要 IE 支持则clip更好）clip-path

div {
  display: inline-block;
  font-size: 1.4rem;
}

div:after {
  position: absolute;
  margin-left: .1rem;
  content: ' ...';
  animation: loading steps(4) 2s infinite;
  clip: rect(auto, 0px, auto, auto);
}

@keyframes loading {
  to {
    clip: rect(auto, 20px, auto, auto);
  }
}

<div>Loading</div>