Есть ли способ анимации эллипсиса с анимацией CSS?
Я пытаюсь создать анимацию с эллипсисом и задаюсь вопросом, возможно ли это с помощью анимации CSS...
Итак, это может быть как
Loading...
Loading..
Loading.
Loading...
Loading..
И в основном просто продолжайте так. Любые идеи?
Изменить: например: http://playground.magicrising.de/demo/ellipsis.html
Ответы
Ответ 1
Как насчет немного измененной версии @xec answer: 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>, чтобы я мог анимировать их отдельно.
Я сделал 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;
}
}
Ответ 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)
Ответ 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;
}
}
demo: http://jsfiddle.net/MDzsR/1/
изменить
Похоже, хром имеет проблемы с анимацией псевдоэлемента. Легкое исправление заключается в том, чтобы обернуть многоточие в свой собственный элемент. Проверьте http://jsfiddle.net/MDzsR/4/
Ответ 5
Ну на самом деле есть чистый способ 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;
}
Ответ 6
Позднее добавление, но я нашел способ сделать это, который поддерживает центрированный текст.
<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: '...';
}
}
Ответ 7
Вот мое решение с чистым 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>
Ответ 8
Вы можете анимировать clip (или лучше clip-path если вам не нужна поддержка IE)
div {
display: inline-block;
font-size: 1.4rem;
}
div:after {
position: absolute;
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>
