有没有办法用CSS动画来制作省略号的动画？

ruarlubt 于 2022-11-26 发布在其他

关注(0)|答案(9)|浏览(216)

我试图有一个省略动画，并想知道如果它是可能的CSS动画...
所以这可能就像

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

基本上就这样继续下去。有什么想法吗？
编辑：像这样：http://playground.magicrising.de/demo/ellipsis.html

css

来源：https://stackoverflow.com/questions/13014808/is-there-any-way-to-animate-an-ellipsis-with-css-animations

9条答案

按热度按时间

nzkunb0c1#

@xec的答案稍微修改一下怎么样：http://codepen.io/thetallweeks/pen/yybGra
使用steps的CSS动画。请参阅MDN文档
第一个
@xec的答案在点上有更多的滑入效果，而这允许点立即出现。

赞(0）回复(0）举报 2022-11-26

ilmyapht2#

你可以尝试使用animation-delay property并为每个省略号字符计时。在本例中，我将每个省略号字符放在一个<span class>中，这样我就可以分别为它们设置动画。
我做了一个**demo**，它并不完美，但它至少说明了我的意思：）
示例中的代码：
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;
    }
}

赞(0）回复(0）举报 2022-11-26

esyap4oy3#

即使是一个更简单的解决方案，工程相当不错！

<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不是一个可动画化的属性。

目前，（2021）这在Chrome/WebKit/Blink/Electron和Firefox以及新版本的Edge中有效。

赞(0）回复(0）举报 2022-11-26

gcxthw6b4#

简短的回答是“不完全是”。不过，你可以玩动画宽度和隐藏溢出，也许得到一个“足够接近”的效果。（下面的代码只为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在激活伪元素时有问题。一个简单的修复方法是将省略号 Package 在它自己的元素中。查看http://jsfiddle.net/MDzsR/4/

赞(0）回复(0）举报 2022-11-26

lymnna715#

一个迟来的补充，但我找到了一种方法来做到这一点，支持居中的文本。

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

赞(0）回复(0）举报 2022-11-26

iyfjxgzm6#

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

赞(0）回复(0）举报 2022-11-26

xqkwcwgp7#

实际上，有一种纯CSS的方式来实现这个。
我从CSS技巧中得到了这个例子，但也使它在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;
}

赞(0）回复(0）举报 2022-11-26

btxsgosb8#

下面是我用纯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;
 }
}

超文本标记语言

Loading <span class="dot dot1">.</span><span class="dot dot2">.</span><span class="dot dot3">.</span>

赞(0）回复(0）举报 2022-11-26

ktca8awb9#

我完全按照上面@CodeBrauer的方法做了，但是因为我的文本是text-align: center（这也适用于right），而且我不希望每次添加句点时文本都移动，所以我添加了"标点空格"：

<style>
    .loading::after {
      display: inline-block;
      animation: dotty steps(1,end) 1s infinite;
      content: '';
    }
    
    @keyframes dotty {
      0%   { content: '\2008\2008\2008'; }
      25%  { content: '.\2008\2008'; }
      50%  { content: '..\2008'; }
      75%  { content: '...'; }
      100% { content: '\2008\2008\2008'; }
    }
</style>
<div class="loading">Loading</div>

赞(0）回复(0）举报 2022-11-26

我来回答

有没有办法用CSS动画来制作省略号的动画？

9条答案

相关问题

热门标签

最新问答