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
css
css-animations
Rey
quelle
quelle
Antworten:
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:
CSS
Animation, die verwendet
steps
. Siehe MDN-DokumenteDie Antwort von @ xec wirkt sich eher auf die Punkte aus, während die Punkte sofort angezeigt werden.
quelle
margin-right
(oder einen Abstand?) Von hinzuzufügen20px
und zu animieren,0px
wenn Sie nicht möchten, dass sich Ihr Text während der Animation verschiebt.1em
anstelle von20px
kann besser für das CSS in dieser Antwort arbeitenSie können versuchen,
animation-delay property
jedes 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
CSS
quelle
Auch eine einfachere Lösung funktioniert ziemlich gut!
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
content
keine 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)
quelle
content
. Um einen gleichmäßigen Animationsrhythmus zu erzielen, sollten Siesteps(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/VmEdXjcontent
Eigenschaft nicht unterstützen . (Weiß nicht über Edge.)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
CSS
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.
quelle
-webkit
von geändert-moz
).Eine späte Ergänzung, aber ich habe einen Weg gefunden, dies zu tun, der zentrierten Text unterstützt.
quelle
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:
CSS:
quelle
-webkit-keyframes
gilt nur für das Webkit und enthält nur IE-Code. Dieser Code verschwendet nur Platz.Sie können animieren
clip
(oder besser,clip-path
wenn Sie keine IE-Unterstützung benötigen).quelle
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
html
quelle