Czy w ogóle istnieje animacja wielokropka za pomocą animacji CSS?

92

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

Rey
źródło
3
Animacje nie są przekształceniami, nie są przejściami. Proszę, nie mieszajcie ich trzech.
BoltClock
Zobacz moją odpowiedź na podobne pytanie: stackoverflow.com/a/24349758/282729
feklee

Odpowiedzi:

88

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.

thetallweeks
źródło
1
To znaczy, że odpowiedziałeś na to jakieś 3 lata później, ale to prawdopodobnie jest lepsze.
Rey
3
@ xckpd7 tak, ale wyszukałem to dzisiaj w Google i właśnie znalazłem tę odpowiedź. SO nie tylko dla PO, to źródło dla wszystkich!
Matt Parrilla,
1
@MattParrilla Jestem operatorem i jeśli zauważyłeś, zmieniłem odpowiedź, którą akceptuję, na tę, zanim napisałem ten komentarz.
Rey
10
Jeśli używasz tego na tekście, który jest wyśrodkowany lub wyrównany do prawej strony, sugeruję dodanie inicjału margin-right(lub dopełnienia?) 20pxI animowanie go, 0pxjeśli nie chcesz, aby tekst przesuwał się podczas animacji.
Kimball
1emzamiast 20pxmoże działać lepiej dla CSS w tej odpowiedzi
Jeevan Takhar
56

Możesz spróbować użyć animation-delay propertyi 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;
    }
}
Christofer Vilander
źródło
Podoba mi się ten pomysł i po prostu rozszerzyłem go trochę, aby pokazać „maszerujące elipsy”: jsfiddle.net/toddwprice/cRLMw
Todd Price,
Nie zadziałało (?), Więc dodałem display: inline; a potem kropki. Czy tak to miało działać? jsfiddle.net/cRLMw/3
Christofer Vilander
4
Przepraszam @Christofer - zapomniałem zapisać moje zaktualizowane skrzypce. Oto znowu: jsfiddle.net/toddwprice/cRLMw/8 Ponadto, oto artykuł, który właśnie przeczytałem, zawierający kilka interesujących animacji CSS: tympanus.net/Tutorials/LoadingAnimations/index4.html
Todd Price
Używając Firefoksa, nie mogę go przeciągnąć, jeśli po prostu kliknę i przeciągnę obraz w jednym ujęciu. Ale jeśli najpierw kliknę obraz, a następnie kliknę i przeciągnę, nie uniemożliwia mi to przeciągania.
Sam Rueby
2
Poprawiłem
Adam Youngers
32

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

CodeBrauer
źródło
Patrzyłem na ten wątek w zeszłym tygodniu. Ładna prosta odpowiedź!
r8n5n
1
+1 do animacji 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/VmEdXj
Jeff Camera,
Chociaż uwielbiam elegancję tego rozwiązania, należy zauważyć, że IE11 i (w chwili pisania tego tekstu) Firefox nie obsługują animacji contentwłaściwości. (Nie wiem o Edge.)
Brad Collins
@BradCollins dzięki za to! Zmieniłem odpowiedź!
CodeBrauer
15

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/

xec
źródło
Nie działa w Chromium (tak, zmieniłem przedrostek vendor-prefix na -webkitfrom -moz).
David mówi, że przywróć Monikę
@DavidThomas masz rację - testowałem teraz w chrome i wygląda na to, że ma problemy z pseudoelementem. Możesz zawinąć wielokropek we własnym elemencie i animować, który zamiast tego (działałby też w przeglądarce Firefox) jsfiddle.net/MDzsR/4
xec
1
Naprawdę fajne rozwiązanie i po prostu idealne dla aplikacji Firefox OS, którą tworzę. Trochę to poprawiłem: jsfiddle.net/feklee/x69uN
feklee
Oto ulepszona wersja, która działa w Chrome, a także działa poprawnie z elementami niewyrównanymi do lewej (nie zmienia szerokości). Pokazuje również każdą kropkę po kolei, bez tego przesuwającego się artefaktu ujawniającego: jsfiddle.net/fze2qxsv
Aayla Secura
@AaylaSecura Zaakceptowana odpowiedź ma bardziej przejrzyste rozwiązanie z użyciem kroków zamiast stackoverflow.com/a/28074607/833146
xec
3

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: '...';
    }
}
anon-e-mouse
źródło
3

Możesz animować clip(lub lepiej, clip-pathjeś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>

Jakob E.
źródło
1

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;
}
MRadev
źródło
Dodajesz zastrzeżone filtry tylko dla IE w klatkach kluczowych specyficznych dla Mozilli i Webkit. W jaki sposób jest to poprawa w stosunku do już przyjętego rozwiązania? Ma nawet ten sam problem (w klatkach 4 i 5 tylko dwie ostatnie i ostatnie kropki są widoczne, w przeciwieństwie do tego, co jest zarysowane w pytaniu, które ma 3 powtarzające się stany, a nie 5)
xec
Pytanie dotyczy tworzenia punktów ładowania, a jest tylko bliski przykład, nieobowiązkowy. Dodałem przedrostki, aby IE lepiej go rozpoznawał i wyświetlał.
MRadev
3
-webkit-keyframesdotyczy tylko zestawu webkit, a wewnątrz masz kod tylko dla IE. Ten kod nie robi nic poza marnowaniem miejsca.
xec
0

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>
repozytorium
źródło