反正有没有用 CSS 动画制作省略号的动画？

Question

提问by Rey

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

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

So it might be like

所以它可能像

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

And basically just continue like that. Any ideas?

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

Edit: like this: http://playground.magicrising.de/demo/ellipsis.html

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

Answer 1

采纳答案by thetallweeks

How about a slightly modified version of @xec's answer: http://codepen.io/thetallweeks/pen/yybGra

稍微修改一下@xec 的答案怎么样：http: //codepen.io/thetallweeks/pen/yybGra

HTML

A single class added to the element:

添加到元素的单个类：

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

CSS

Animation that uses steps. See MDN docs

使用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: "26"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 20px;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 20px;    
  }
}

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

@xec 的回答对点有更多的滑动效果，而这允许点立即出现。

Answer 2

回答by Christofer Vilander

You could try to use the animation-delay propertyand time each ellipsis character. In this case I've put each ellipsis character in a <span class>so I can animate them separately.

您可以尝试使用animation-delay property和时间每个省略号字符。在这种情况下，我将每个省略号字符放在 a 中，<span class>以便我可以分别为它们设置动画。

I made a demo, which isn't perfect, but it shows at least what I mean :)

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

The code from my example:

我的示例中的代码：

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

回答by CodeBrauer

Even a more simple solution, works pretty well!

即使是更简单的解决方案，效果也很好！

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

Just edited the content with animation instead of hiding some dots...

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

Demo here: https://jsfiddle.net/f6vhway2/1/

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

Edit:Thanks to @BradCollinsfor pointing out that contentis not an animatable property.

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

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

So this is a WebKit/Blink/Electron only solution.(But it works in current FF versions as well)

所以这是一个 WebKit/Blink/Electron 唯一的解决方案。（但它也适用于当前的 FF 版本）

Answer 4

回答by xec

Short answer is "not really". However, you can play around with animating width and overflow hidden, and maybe get an effect that is "close enough". (code below tailored for firefox only, add vendor prefixes as needed).

简短的回答是“不是真的”。但是，您可以使用动画宽度和溢出隐藏，并可能获得“足够接近”的效果。（以下代码仅适用于 Firefox，根据需要添加供应商前缀）。

html

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

css

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -moz-animation: ellipsis 2s infinite;
    content: "26"; /* ascii code for the ellipsis character */
}
@-moz-keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}

demo: http://jsfiddle.net/MDzsR/1/

演示：http: //jsfiddle.net/MDzsR/1/

edit

编辑

It appears chrome has issues with animating the pseudo-element. An easy fix is to wrap the ellipsis in its own element. Check out http://jsfiddle.net/MDzsR/4/

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

Answer 5

回答by anon-e-mouse

A late addition but I found a way to do this which supports centered text.

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

<element>:after {
    content: '<h4 id="searching-ellipsis"> Searching
    <span>.</span>
    <span>.</span>
    <span>.</span>
</h4>
a0@-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;
}
a0

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

a0';
    animation: progress-ellipsis 5s infinite;
}

@keyframes progress-ellipsis {
    0% {
        content: 'Loading <span class="dot dot1">.</span><span class="dot dot2">.</span><span class="dot dot3">.</span>
a0div {
  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);
  }
}
a0<div>Loading</div>a0';
    }
    30% {
        content: '.##代码##a0##代码##a0';
    }
    60% {
        content: '..##代码##a0';
    }
    90% {
        content: '...';
    }
}

Answer 6

回答by MRadev

Well Actually there is a pure CSS way of doing this.

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

I got the example from CSS Tricks, but made it also to be supported in Internet Explorer (I have tested it in 10+).

我从 CSS Tricks 得到了这个例子，但它也被 Internet Explorer 支持（我已经在 10+ 中测试过了）。

Check the Demo: http://jsfiddle.net/Roobyx/AT6v6/2/

检查演示：http: //jsfiddle.net/Roobyx/AT6v6/2/

HTML:

HTML：

##代码##

CSS:

CSS：

##代码##

Answer 7

回答by repo

Here is my solution with pure css https://jsfiddle.net/pduc6jx5/1/explained: https://medium.com/@lastseeds/create-text-ellipsis-animation-with-pure-css-7f61acee69cc

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

scss

##代码##

html

##代码##

Answer 8

回答by Jakob E

You can animate clip(or better clip-pathif you don't need IE support)

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

##代码## ##代码##

反正有没有用 CSS 动画制作省略号的动画？

提问by Rey

采纳答案by thetallweeks

回答by Christofer Vilander

回答by CodeBrauer

回答by xec

回答by anon-e-mouse

回答by MRadev

回答by repo

回答by Jakob E

相关推荐

最近更新

标签

反正有没有用 CSS 动画制作省略号的动画？

提问by Rey

采纳答案by thetallweeks

回答by Christofer Vilander

回答by CodeBrauer

回答by xec

回答by anon-e-mouse

回答by MRadev

回答by repo

回答by Jakob E

相关推荐

CSS 如何让 Firefox 打印背景颜色样式？

CSS Twitter Bootstrap：在进度条上居中文本

如何在 Firebug 中查看打印媒体 CSS？

CSS 阻止浏览器文本输入建议

相关推荐

最近更新

标签