无论如何，有没有用CSS动画制作省略号的动画？ [英] Is there anyway to animate an ellipsis with CSS animations?

问题描述

我正在尝试制作省略号动画，并想知道CSS动画是否可能...

I'm trying to have an ellipsis animate, and was wondering if it was possible with CSS animations...

所以可能就像

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

基本上像那样继续。有任何想法吗？

And basically just continue like that. Any ideas?

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

推荐答案

如何稍作修改 @xec的答案： http://codepen.io/thetallweeks/pen/yybGra

HTML

添加到元素的单个类：

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

CSS

使用步的动画。 请参阅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的答案更具滑入效果在点上，而这可以使点立即显示。

@xec's answer has more of a slide-in effect on the dots, while this allows the dots to appear instantly.

这篇关于无论如何，有没有用CSS动画制作省略号的动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！