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

css  css-animations 
— 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
— 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>
Rozwiń fragment

— 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
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.