Próbuję stworzyć animację wielokropka i zastanawiałem się, czy jest to możliwe z animacjami CSS ...
Więc może być tak
Loading...
Loading..
Loading.
Loading...
Loading..
I po prostu kontynuuj w ten sposób. Jakieś pomysły?
Edycja: w ten sposób: http://playground.magicrising.de/demo/ellipsis.html
css
css-animations
Rey
źródło
źródło
Odpowiedzi:
Co powiesz na nieco zmodyfikowaną wersję odpowiedzi @ xec : http://codepen.io/thetallweeks/pen/yybGra
HTML
Pojedyncza klasa dodana do elementu:
<div class="loading">Loading</div>
CSS
Animacja wykorzystująca
steps
. Zobacz dokumentację 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; } }
Odpowiedź @ xec ma bardziej efekt wsuwania się w kropki, podczas gdy to pozwala kropkom pojawiać się natychmiast.
źródło
margin-right
(lub dopełnienia?)20px
I animowanie go,0px
jeśli nie chcesz, aby tekst przesuwał się podczas animacji.1em
zamiast20px
może działać lepiej dla CSS w tej odpowiedziMożesz spróbować użyć
animation-delay property
i czasu dla każdego znaku wielokropka. W tym przypadku umieściłem każdy znak wielokropka w a,<span class>
więc mogę animować je osobno.Zrobiłem demo , które nie jest idealne, ale przynajmniej pokazuje, o co mi chodzi :)
Kod z mojego przykładu:
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; } }
źródło
Jeszcze prostsze rozwiązanie działa całkiem nieźle!
<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>
Właśnie zredagowałem treść z animacją zamiast ukrywać niektóre kropki ...
Demo tutaj: https://jsfiddle.net/f6vhway2/1/
Edycja: dzięki @BradCollins za wskazanie, że
content
nie jest to animowana właściwość.https://www.w3.org/TR/css3-transitions/#animatable-css
Jest to więc rozwiązanie tylko dla WebKit / Blink / Electron. (Ale działa również w obecnych wersjach FF)
źródło
content
. Aby uzyskać równomierny rytm animacji, należy użyćsteps(1)
i zdefiniować jedną dodatkową klatkę kluczową. Funkcja step dyktuje liczbę kroków między klatkami kluczowymi, a ponieważ określamy każdą klatkę, chcemy tylko jeden krok między nimi. codepen.io/anon/pen/VmEdXjcontent
właściwości. (Nie wiem o Edge.)Krótka odpowiedź brzmi „nie do końca”. Możesz jednak pobawić się z ukrytą animacją szerokości i przepełnienia i może uzyskać efekt, który jest „wystarczająco blisko”. (poniższy kod dostosowany tylko do przeglądarki Firefox, w razie potrzeby dodaj prefiksy dostawców).
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/
edytować
Wygląda na to, że chrome ma problemy z animacją pseudoelementu. Łatwym rozwiązaniem jest owinięcie elipsy własnym elementem. Sprawdź http://jsfiddle.net/MDzsR/4/
źródło
-webkit
from-moz
).Późny dodatek, ale znalazłem sposób, aby to zrobić, który obsługuje wyśrodkowany tekst.
<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: '...'; } }
źródło
Możesz animować
clip
(lub lepiej,clip-path
jeśli nie potrzebujesz obsługi IE)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>
źródło
Właściwie jest na to czysty sposób CSS.
Wziąłem przykład z CSS Tricks, ale sprawiłem, że był obsługiwany również w Internet Explorerze (testowałem go w 10+).
Sprawdź 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; }
źródło
-webkit-keyframes
dotyczy tylko zestawu webkit, a wewnątrz masz kod tylko dla IE. Ten kod nie robi nic poza marnowaniem miejsca.Oto moje rozwiązanie z czystym css https://jsfiddle.net/pduc6jx5/1/ wyjaśnione: 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>
źródło