Gibt es überhaupt eine Möglichkeit, eine Ellipse mit CSS-Animationen zu animieren?

89

Ich versuche, eine Ellipse zu animieren, und habe mich gefragt, ob dies mit CSS-Animationen möglich ist ...

So könnte es sein

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

Und im Grunde einfach so weitermachen. Irgendwelche Ideen?

Bearbeiten: wie folgt : http://playground.magicrising.de/demo/ellipsis.html

Rey
quelle
3
Animationen sind keine Transformationen, keine Übergänge. Bitte verwechseln Sie die drei nicht.
BoltClock
Siehe meine Antwort auf eine ähnliche Frage: stackoverflow.com/a/24349758/282729
feklee

Antworten:

85

Wie wäre es mit einer leicht modifizierten Version der Antwort von @ xec : http://codepen.io/thetallweeks/pen/yybGra

HTML

Eine einzelne Klasse, die dem Element hinzugefügt wurde:

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

CSS

Animation, die verwendet steps. Siehe MDN-Dokumente

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

Die Antwort von @ xec wirkt sich eher auf die Punkte aus, während die Punkte sofort angezeigt werden.

die ganzen Wochen
quelle
1
Ich meine, Sie haben das wie 3 Jahre später beantwortet, aber das ist wahrscheinlich besser.
Rey
3
@ xckpd7 ja, aber ich habe das heute gegoogelt und gerade diese Antwort gefunden. SO ist nicht nur für das OP, es ist eine Ressource für alle!
Matt Parrilla
1
@MattParrilla Ich bin der OP, und wenn Sie bemerkt haben, dass ich die Antwort, die ich akzeptiere, auf diese geändert habe, bevor ich diesen Kommentar abgegeben habe.
Rey
10
Wenn Sie dies für Text verwenden, der zentriert oder richtig ausgerichtet ist, würde ich vorschlagen, eine Initiale margin-right(oder einen Abstand?) Von hinzuzufügen 20pxund zu animieren, 0pxwenn Sie nicht möchten, dass sich Ihr Text während der Animation verschiebt.
Kimball
1emanstelle von 20pxkann besser für das CSS in dieser Antwort arbeiten
Jeevan Takhar
55

Sie können versuchen, animation-delay propertyjedes Auslassungszeichen und die Zeit zu verwenden . In diesem Fall habe ich jedes Auslassungszeichen in ein Feld eingefügt, <span class>damit ich sie separat animieren kann.

Ich habe eine Demo gemacht , die nicht perfekt ist, aber zumindest zeigt, was ich meine :)

Der Code aus meinem Beispiel:

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;
    }
}
Christofer Vilander
quelle
Ich mag diese Idee und habe sie nur ein wenig erweitert, um "marschierende Elipsen" zu zeigen: jsfiddle.net/toddwprice/cRLMw
Todd Price
Es hat nicht funktioniert (?), Also habe ich display hinzugefügt: inline; und dann die Punkte. Soll das so funktionieren? jsfiddle.net/cRLMw/3
Christofer Vilander
3
Sorry @Christofer - habe vergessen, meine aktualisierte Geige zu speichern. Hier ist es wieder: jsfiddle.net/toddwprice/cRLMw/8 Hier ist auch ein Artikel, den ich gerade gelesen habe und der einige interessante CSS-Animationen enthält: tympanus.net/Tutorials/LoadingAnimations/index4.html
Todd Price
Mit Firefox kann ich es nicht ziehen, wenn ich einfach auf das Bild klicke und es auf einmal ziehe. Wenn ich jedoch zuerst auf das Bild klicke und dann klicke und ziehe, kann ich nicht ziehen.
Sam Rueby
2
Ich habe HTML und CSS ein wenig optimiert, um <i> Tags zu verwenden ... jsfiddle.net/DkcD4/77
Adam Youngers
31

Auch eine einfachere Lösung funktioniert ziemlich gut!

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

Bearbeiten Sie einfach den Inhalt mit Animation, anstatt einige Punkte zu verbergen ...

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


Bearbeiten: Vielen Dank an @BradCollins für den Hinweis, dass dies contentkeine animierbare Eigenschaft ist.

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

Dies ist also eine reine WebKit / Blink / Electron-Lösung. (Aber es funktioniert auch in aktuellen FF-Versionen)

CodeBrauer
quelle
Ich habe mir diesen Thread erst letzte Woche angesehen. Schöne einfache Antwort!
r8n5n
1
+1 zum Animieren content. Um einen gleichmäßigen Animationsrhythmus zu erzielen, sollten Sie steps(1)einen zusätzlichen Keyframe verwenden und definieren. Die Schrittfunktion bestimmt die Anzahl der Schritte zwischen Schlüsselbildern. Da wir jedes Bild angeben, möchten wir nur einen einzigen Schritt zwischen ihnen. codepen.io/anon/pen/VmEdXj
Lucifer Sam
Obwohl ich die Eleganz dieser Lösung liebe, sollte beachtet werden, dass IE11 und (zum Zeitpunkt dieses Schreibens) Firefox die Animation der contentEigenschaft nicht unterstützen . (Weiß nicht über Edge.)
Brad Collins
@BradCollins danke dafür! Ich habe meine Antwort bearbeitet!
CodeBrauer
15

Kurze Antwort ist "nicht wirklich". Sie können jedoch mit versteckter Animationsbreite und Überlauf herumspielen und möglicherweise einen Effekt erzielen, der "nah genug" ist. (Der folgende Code ist nur auf Firefox zugeschnitten. Fügen Sie nach Bedarf Herstellerpräfixe hinzu.)

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/

bearbeiten

Es scheint, dass Chrome Probleme mit der Animation des Pseudoelements hat. Eine einfache Lösung besteht darin, die Auslassungspunkte in ein eigenes Element zu wickeln. Schauen Sie sich http://jsfiddle.net/MDzsR/4/ an.

xec
quelle
Funktioniert nicht in Chromium (ja, ich habe das Herstellerpräfix in -webkitvon geändert -moz).
David sagt, Monica
@ DavidThomas Sie haben Recht - jetzt in Chrom getestet und es scheint, dass es Probleme mit dem Pseudoelement gibt. Sie könnten die Auslassungspunkte in ein eigenes Element einwickeln und stattdessen animieren (würde auch in Firefox funktionieren
xec
1
Wirklich schöne Lösung und einfach perfekt für eine Firefox OS-App, die ich entwickle. Es wurde ein wenig optimiert
feklee
Hier ist eine verbesserte Version, die unter Chrome funktioniert und auch mit nicht linksbündigen Elementen korrekt funktioniert (ändert die Breite nicht). Außerdem wird jeder Punkt nacheinander angezeigt
Aayla Secura
@AaylaSecura Die akzeptierte Antwort hat eine sauberere Lösung mit Schritten anstelle von stackoverflow.com/a/28074607/833146
xec
2

Eine späte Ergänzung, aber ich habe einen Weg gefunden, dies zu tun, der zentrierten Text unterstützt.

<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: '...';
    }
}
anon-e-mouse
quelle
1

Nun, eigentlich gibt es eine reine CSS-Methode, um dies zu tun.

Ich habe das Beispiel von CSS Tricks erhalten, es aber auch in Internet Explorer unterstützt (ich habe es in 10+ getestet).

Überprüfen Sie die Demo: 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
quelle
Sie fügen proprietäre Nur-IE-Filter in Mozilla-spezifischen und Webkit-spezifischen Keyframes hinzu. Wie ist dies eine Verbesserung gegenüber der bereits akzeptierten Lösung? Es hat sogar das gleiche Problem (in den Bildern 4 und 5 sind nur die beiden letzten und allerletzten Punkte sichtbar, im Gegensatz zu dem, was in der Frage beschrieben wird, die 3 sich wiederholende Zustände hat, nicht 5)
xec
Die Frage betrifft das Erstellen von Ladepunkten, und es gibt nur ein Beispiel, das nicht obligatorisch ist. Was ich hinzugefügt habe, sind Präfixe, damit der IE sie besser erkennen und anzeigen kann.
MRadev
3
-webkit-keyframesgilt nur für das Webkit und enthält nur IE-Code. Dieser Code verschwendet nur Platz.
XEC
1

Sie können animieren clip(oder besser, clip-pathwenn Sie keine IE-Unterstützung benötigen).

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>

Jakob E.
quelle
0

Hier ist meine Lösung mit reinem CSS https://jsfiddle.net/pduc6jx5/1/ erklärt: https://medium.com/@lastseeds/create-text-ellipsis-animation-with-pure-css-7f61acee69cc

scss



.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>
Repo
quelle