Esiste comunque per animare un'ellissi con animazioni CSS?

92

Sto cercando di avere un'ellissi animata e mi chiedevo se fosse possibile con le animazioni CSS ...

Quindi potrebbe essere come

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

E fondamentalmente continua così. Qualche idea?

Modifica: in questo modo: http://playground.magicrising.de/demo/ellipsis.html

css  css-animations 
— Rey
fonte
3
Le animazioni non sono trasformazioni non sono transizioni. Per favore, non confonderli tutti e tre.
— BoltClock
Vedere la mia risposta a una domanda simile: stackoverflow.com/a/24349758/282729
— feklee

Risposte:

88

Che ne dici di una versione leggermente modificata della risposta di @ xec : http://codepen.io/thetallweeks/pen/yybGra

HTML

Una singola classe aggiunta all'elemento:

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

CSS

Animazione che utilizza steps. Consulta i documenti 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;    
  }
}

La risposta di @ xec ha più un effetto di scorrimento sui punti, mentre ciò consente ai punti di apparire istantaneamente.

— thetallweeks
fonte
1
Voglio dire, hai risposto 3 anni dopo, ma probabilmente è meglio.
— Rey
3
@ xckpd7 sì, ma oggi ho cercato su Google e ho trovato questa risposta. Quindi non è solo per l'OP, è una risorsa per tutti!
— Matt Parrilla
1
@ MattParrilla Sono l'OP, e se hai notato che ho cambiato la risposta accetto questa prima di fare quel commento.
— Rey
10
Se lo stai usando su un testo centrato o allineato a destra, ti suggerirei di aggiungere un'iniziale margin-right(o un riempimento?) 20pxE animarlo 0pxse non vuoi che il tuo testo si sposti durante l'animazione.
— Kimball
1emal posto di 20pxpotrebbe funzionare meglio per il CSS in questa risposta
— Jeevan Takhar
56

Potresti provare a usare il animation-delay propertytempo e ogni carattere di ellissi. In questo caso ho inserito ogni carattere di puntini di sospensione in un in <span class>modo da poterli animare separatamente.

Ho fatto una demo , che non è perfetta, ma mostra almeno cosa intendo :)

Il codice del mio esempio:

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
fonte
Mi piace questa idea e l'ho appena ampliata un po 'per mostrare "marching elipses": jsfiddle.net/toddwprice/cRLMw
— Todd Price
Non ha funzionato (?), Quindi ho aggiunto display: inline; e poi i punti. È così che doveva funzionare? jsfiddle.net/cRLMw/3
— Christofer Vilander
4
Scusa @Christofer - ho dimenticato di salvare il mio violino aggiornato. Eccolo di nuovo: jsfiddle.net/toddwprice/cRLMw/8 Inoltre, ecco un articolo che ho appena letto che ha alcune interessanti animazioni CSS: tympanus.net/Tutorials/LoadingAnimations/index4.html
— Todd Price
Utilizzando Firefox non posso trascinarlo se semplicemente clicco e trascino l'immagine in un colpo solo. Ma se clicco prima sull'immagine e poi clicco e trascino, non mi viene impedito di trascinare.
— Sam Rueby
2
Ho ottimizzato un po 'l'HTML e il CSS per utilizzare i tag <i> ... jsfiddle.net/DkcD4/77
— Adam Youngers
32

Anche una soluzione più semplice, funziona abbastanza bene!

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

Ho appena modificato il contenuto con l'animazione invece di nascondere alcuni punti ...

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

Modifica: grazie a @BradCollins per aver sottolineato che contentnon è una proprietà animabile.

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

Quindi questa è una soluzione solo WebKit / Blink / Electron. (Ma funziona anche nelle attuali versioni FF)

— CodeBrauer
fonte
Stavo guardando questo thread solo la scorsa settimana. Bella risposta semplice!
— r8n5n
1
+1 per l'animazione content. Per ottenere un ritmo di animazione uniforme è necessario utilizzare steps(1)e definire un fotogramma chiave aggiuntivo. La funzione step determina il numero di passaggi tra i fotogrammi chiave e poiché stiamo specificando ogni fotogramma, vogliamo solo un singolo passaggio tra di loro. codepen.io/anon/pen/VmEdXj
— Jeff Camera
Anche se amo l'eleganza di questa soluzione, va notato che IE11 e (al momento della stesura di questo articolo) Firefox non supportano l'animazione della contentproprietà. (Non so di Edge.)
— Brad Collins,
@BradCollins grazie per questo! Ho modificato la mia risposta!
— CodeBrauer
15

La risposta breve è "non proprio". Tuttavia, puoi giocare con la larghezza dell'animazione e l'overflow nascosti, e magari ottenere un effetto "abbastanza vicino". (codice di seguito personalizzato solo per Firefox, aggiungere i prefissi del fornitore secondo necessità).

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/

modificare

Sembra che Chrome abbia problemi con l'animazione dello pseudoelemento. Una soluzione semplice è avvolgere i puntini di sospensione nel proprio elemento. Dai un'occhiata a http://jsfiddle.net/MDzsR/4/

— xec
fonte
Non funziona in Chromium (sì, ho cambiato il prefisso del fornitore in -webkitda -moz).
— David dice di reintegrare Monica il
@DavidThomas hai ragione - ora è stato testato in Chrome e sembra che abbia problemi con lo pseudo elemento. Potresti avvolgere i puntini di sospensione nel proprio elemento e animarlo invece (funzionerebbe anche in Firefox) jsfiddle.net/MDzsR/4
— xec
1
Soluzione davvero carina e perfetta per un'app per Firefox OS che sto sviluppando. Modificato un po ': jsfiddle.net/feklee/x69uN
— feklee
Ecco una versione migliorata che funziona su Chrome e funziona correttamente con elementi non allineati a sinistra (non cambia la larghezza). Inoltre, mostra ogni punto consecutivamente, senza questo artefatto rivelatore scorrevole: jsfiddle.net/fze2qxsv
— Aayla Secura
@AaylaSecura La accettato risposta ha una soluzione più pulita utilizzando passaggi invece stackoverflow.com/a/28074607/833146
— XEC
3

Un'aggiunta tardiva, ma ho trovato un modo per farlo che supporti il ​​testo centrato.

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

Puoi animare clip(o meglio clip-pathse non hai bisogno del supporto di 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>
Espandi lo snippet

— Jakob E
fonte
1

In realtà c'è un modo puro CSS per farlo.

Ho preso l'esempio da CSS Tricks, ma l'ho realizzato anche per essere supportato in Internet Explorer (l'ho testato in 10+).

Controlla la 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
fonte
Stai aggiungendo filtri proprietari solo per IE a fotogrammi chiave specifici per mozilla e webkit. In che modo questo è un miglioramento rispetto alla soluzione già accettata? Ha anche lo stesso problema (nei fotogrammi 4 e 5 sono visibili solo i due ultimi e l'ultimo punto, rispettivamente, a differenza di quanto delineato nella domanda, che ha 3 stati ripetuti, non 5)
— xec
La domanda riguarda la creazione di punti di caricamento e c'è solo un esempio vicino, non obbligatorio. Quello che ho aggiunto sono i prefissi, quindi IE può riconoscerlo meglio e visualizzarlo.
— MRadev
3
-webkit-keyframessi applica solo al webkit e al suo interno è presente il codice solo IE. Questo codice non fa altro che sprecare spazio.
— xec
0

Ecco la mia soluzione con puro css https://jsfiddle.net/pduc6jx5/1/ spiegata: 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
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.