无论如何，有没有用CSS动画制作省略号的动画？

92

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

所以可能就像

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

基本上就是这样继续。有任何想法吗？

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

css  css-animations 
— 雷伊
source
3
动画不是变换，不是过渡。请不要混淆他们三个。
— BoltClock
看到我对类似问题的回答：stackoverflow.com/a/24349758/282729
— feklee 2014年

Answers:

88

@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的答案在点上具有更多的滑入效果，而这允许点立即出现。

— 高周
source
1
我的意思是您确实在3年后回答了这个问题，但这可能更好。
— Rey 2015年
3
@ xckpd7是的，但是我今天在Google上搜索了一下，才找到了这个答案。因此，这不仅是用于OP，而且是所有人的资源！
— 马特·帕里拉
1
@MattParrilla我是OP，如果您注意到我在发表评论之前更改了对此答案的接受。
— Rey
10
如果您要在居中或对齐正确的文本上使用此字体，则建议您添加初始margin-right（或填充？）20px并将其设置为动画，0px如果您不想在动画过程中移动文本。
— Kimball
1em代替20px在此答案中可能对CSS更好的工作
— Jeevan Takhar，
56

您可以尝试使用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;
    }
}
— 克里斯托弗·维兰德
source
我喜欢这个主意，并在此基础上进行了扩展以显示“行军椭圆”：jsfiddle.net/toddwprice/cRLMw
— Todd Price
它不起作用（？），所以我添加了display：inline; 然后是点。这就是它的工作原理吗？jsfiddle.net/cRLMw/3
— Christofer Vilander，
4
抱歉@Christofer-忘记保存我更新的小提琴。再次出现： jsfiddle.net/toddwprice/cRLMw/8 另外，我刚刚阅读的这篇文章中有一些有趣的CSS动画： tympanus.net/Tutorials/LoadingAnimations/index4.html
— Todd Price
使用Firefox，如果我只是单击并拖动图像一次就无法拖动它。但是，如果我先单击图像，然后单击并拖动，则不会阻止我拖动。
— Sam Rueby
2
我稍微调整了HTML和CSS以便使用<i>标记... jsfiddle.net/DkcD4/77
— Adam Youngers 2014年
32

甚至更简单的解决方案，效果也很好！

<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版本）

— CodeBrauer
source
上周我正在看这个话题。好简单的答案！
— r8n5n
1
为动画设置+1 content。要获得均匀的动画节奏，您应该使用steps(1)并定义一个额外的关键帧。step函数决定关键帧之间的步数，并且由于我们要指定每个帧，因此我们只希望它们之间有一个单步。codepen.io/anon/pen/VmEdXj
— Jeff Camera
尽管我喜欢此解决方案的优雅之处，但应注意，IE11和（截至撰写本文时）Firefox不支持对该content属性设置动画。（不了解Edge。）
— Brad Collins
@BradCollins对此表示感谢！我已经编辑了答案！
— CodeBrauer
15

简短的回答是“不是真的”。但是，您可以在隐藏动画宽度和溢出的情况下进行游戏，并且可能会获得“足够接近”的效果。（下面的代码仅适用于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/

编辑

铬似乎在为伪元素设置动画方面存在问题。一个简单的解决方法是将省略号包装在其自己的元素中。查看http://jsfiddle.net/MDzsR/4/

— xec
source
在Chromium中不起作用（是的，我将供应商前缀-webkit从更改为-moz）。
— 大卫说恢复莫妮卡（Monica）
@DavidThomas，您说对了-现在已在chrome中进行了测试，似乎伪元素存在问题。您可以将省略号包装在其自己的元素中并进行动画处理（也可以在firefox中使用）jsfiddle.net/MDzsR/4
— xec 2012年
1
确实不错的解决方案，非常适合我正在开发的Firefox OS应用。进行了一些调整：jsfiddle.net/feklee/x69uN
— feklee
这是一个改进的版本，可以在Chrome上使用，并且可以与非左对齐的元素一起正常使用（不会更改宽度）。另外，它连续显示每个点，而没有滑动显示的伪像：jsfiddle.net/fze2qxsv
— Aayla Secura
@AaylaSecura可接受的答案使用步骤更干净的解决方案，而不是用stackoverflow.com/a/28074607/833146
— xec
3

最近添加的内容，但是我找到了一种支持居中文本的方法。

<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: '...';
    }
}
— 老鼠
source
3

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

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

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

@keyframes loading {
  to {
    clip: rect(auto, 20px, auto, auto);
  }
}
<div>Loading</div>
展开摘要

— 雅各布·E
source
1

好吧，实际上有一种纯粹的CSS方式可以做到这一点。

我从CSS Tricks获得了该示例，但也使其在Internet Explorer中得到支持（我已经在10+中对其进行了测试）。

检查演示：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;
}
— MRadev
source
您将在mozilla特定的和webkit特定的关键帧中添加专有的仅IE过滤器。与已经接受的解决方案相比有何改进？它甚至具有相同的问题（在第4帧和第5帧中，分别只有最后两个点和最后一个点可见，而不是问题中概述的点，后者具有3个重复状态，而不是5个）
— xec
问题是关于创建加载点，这只是一个近乎示例，不是强制性的。我添加的是前缀，因此IE可以更好地识别它并显示它。
— MRadev
3
-webkit-keyframes仅适用于webkit，并且内部只有IE代码。此代码只不过浪费了空间。
— xec 2014年
0

这是我的纯CSS解决方案https://jsfiddle.net/pduc6jx5/1/ 解释了：https : //medium.com/@lastseeds/create-text-ellipsis-animation-with-pure-css-7f61acee69cc

脚本



.dot1 {
 animation: visibility 3s linear infinite;
}

@keyframes visibility {
 0% {
 opacity: 1;
 }
 65% {
 opacity: 1;
 }
 66% {
 opacity: 0;
 }
 100% {
 opacity: 0;
 }
}

.dot2 {
 animation: visibility2 3s linear infinite;
}

@keyframes visibility2 {
 0% {
  opacity: 0;
 }
 21% {
  opacity: 0;
 }
 22% {
  opacity: 1;
 }
 65% {
  opacity: 1;
 }
 66% {
  opacity: 0;
 }
 100% {
  opacity: 0;
 }
}

.dot3 {
 animation: visibility3 3s linear infinite;
}

@keyframes visibility3 {
 0% {
  opacity: 0;
 }
 43% {
  opacity: 0;
 }
 44% {
  opacity: 1;
 }
 65% {
  opacity: 1;
 }
 66% {
  opacity: 0;
 }
 100% {
  opacity: 0;
 }
}

html

Loading <span class="dot dot1">.</span><span class="dot dot2">.</span><span class="dot dot3">.</span>
— 回购
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.