Existe-t-il de toute façon pour animer une ellipse avec des animations CSS?

92

J'essaye d'avoir une ellipse animée, et je me demandais si c'était possible avec des animations CSS ...

Donc ça pourrait être comme

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

Et en gros, continuez comme ça. Des idées?

Edit: comme ceci: http://playground.magicrising.de/demo/ellipsis.html

css css-animations Rey
la source
3
Les animations ne sont pas des transitions ne sont pas des transitions. Veuillez ne pas mélanger les trois.
BoltClock
Voir ma réponse à une question similaire: stackoverflow.com/a/24349758/282729
feklee

Réponses:

88

Que diriez-vous d'une version légèrement modifiée de la réponse de @ xec : http://codepen.io/thetallweeks/pen/yybGra

HTML

Une seule classe ajoutée à l'élément:

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

CSS

Animation qui utilise steps. Voir la documentation 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 réponse de @ xec a davantage un effet de glissement sur les points, alors que cela permet aux points d'apparaître instantanément.

les semaines
la source
1
Je veux dire que vous avez répondu à cela comme 3 ans plus tard, mais c'est probablement mieux.
Rey
3
@ xckpd7 oui, mais j'ai googlé ceci aujourd'hui et je viens de trouver cette réponse. Donc, ce n'est pas seulement pour l'OP, c'est une ressource pour tous!
Matt Parrilla
1
@MattParrilla Je suis l'OP, et si vous avez remarqué que j'ai changé la réponse, j'accepte celle-ci avant de faire ce commentaire.
Rey
10
Si vous utilisez ceci sur du texte centré ou aligné à droite, je vous suggère d'ajouter une initiale margin-right(ou un remplissage?) De 20pxet de l'animer 0pxsi vous ne voulez pas que votre texte se déplace pendant l'animation.
Kimball
1emà la place de 20pxpeut mieux fonctionner pour le CSS dans cette réponse
Jeevan Takhar
56

Vous pouvez essayer d'utiliser le animation-delay propertyet l'heure de chaque caractère d'ellipse. Dans ce cas, j'ai mis chaque caractère d'ellipse dans un<span class> afin que je puisse les animer séparément.

J'ai fait une démo , ce qui n'est pas parfait, mais ça montre au moins ce que je veux dire :)

Le code de mon exemple:

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
la source
J'aime cette idée et je l'ai juste développée un peu pour montrer "les élipses en marche": jsfiddle.net/toddwprice/cRLMw
Todd Price
Cela n'a pas fonctionné (?), J'ai donc ajouté display: inline; puis les points. Est-ce ainsi que cela devait fonctionner? jsfiddle.net/cRLMw/3
Christofer Vilander
4
Désolé @Christofer - j'ai oublié de sauvegarder mon violon mis à jour. Le voici encore: jsfiddle.net/toddwprice/cRLMw/8 Aussi, voici un article que je viens de lire qui contient des animations CSS intéressantes: tympanus.net/Tutorials/LoadingAnimations/index4.html
Todd Price
En utilisant Firefox, je ne peux pas le faire glisser si je clique et fais simplement glisser l'image d'un seul coup. Mais si je clique d'abord sur l'image, puis que je clique et que je fais glisser, je ne suis pas empêché de faire glisser.
Sam Rueby
2
J'ai légèrement modifié le HTML et le CSS pour utiliser les balises <i> ... jsfiddle.net/DkcD4/77
Adam Youngers
32

Même une solution plus simple, fonctionne plutôt bien!

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

Je viens de modifier le contenu avec une animation au lieu de cacher des points ...

Démo ici: https://jsfiddle.net/f6vhway2/1/

Edit: Merci à @BradCollins pour avoir souligné que ce contentn'est pas une propriété animable.

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

Il s'agit donc d'une solution WebKit / Blink / Electron uniquement. (Mais cela fonctionne également dans les versions actuelles de FF)

CodeBrauer
la source
Je regardais ce fil la semaine dernière. Belle réponse simple!
r8n5n
1
+1 pour l'animation content. Pour obtenir un rythme d'animation uniforme, vous devez utiliser steps(1)et définir une image clé supplémentaire. La fonction step dicte le nombre d'étapes entre les images clés et puisque nous spécifions chaque image, nous voulons juste une seule étape entre elles. codepen.io/anon/pen/VmEdXj
Jeff Camera
Bien que j'adore l'élégance de cette solution, il convient de noter que IE11 et (au moment d'écrire ces lignes) Firefox ne prennent pas en charge l'animation de la contentpropriété. (Je ne sais pas pour Edge.)
Brad Collins
@BradCollins merci pour cela! J'ai édité ma réponse!
CodeBrauer
15

La réponse courte est "pas vraiment". Cependant, vous pouvez jouer avec la largeur d'animation et le débordement masqués, et peut-être obtenir un effet "assez proche". (code ci-dessous conçu pour Firefox uniquement, ajoutez des préfixes de fournisseur si nécessaire).

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

démo: http://jsfiddle.net/MDzsR/1/

Éditer

Il semble que Chrome ait des problèmes avec l'animation du pseudo-élément. Une solution simple consiste à envelopper les points de suspension dans son propre élément. Consultez http://jsfiddle.net/MDzsR/4/

xec
la source
Ne fonctionne pas dans Chromium (oui, j'ai changé le préfixe du fournisseur en à -webkitpartir de -moz).
David dit de réintégrer Monica
@DavidThomas vous avez raison - testé dans Chrome maintenant et il semble qu'il y ait des problèmes avec le pseudo élément. Vous pouvez envelopper les points de suspension dans son propre élément et l'animer à la place (fonctionnerait également dans Firefox) jsfiddle.net/MDzsR/4
xec
1
Solution vraiment sympa, et tout simplement parfaite pour une application Firefox OS que je développe. Je l'ai un peu modifié
feklee
Voici une version améliorée qui fonctionne sur Chrome, ainsi que fonctionne correctement avec les éléments non alignés à gauche (ne change pas la largeur). En outre, il montre chaque point consécutivement, sans cet artefact révélateur glissant: jsfiddle.net/fze2qxsv
Aayla Secura
@AaylaSecura La réponse acceptée a une solution plus propre utilisant des étapes à la place stackoverflow.com/a/28074607/833146
xec
3

Un ajout tardif, mais j'ai trouvé un moyen de le faire qui prend en charge le texte centré.

<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-souris
la source
3

Vous pouvez animer clip(ou mieux clip-pathsi vous n'avez pas besoin du support 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>
Développer l'extrait

Jakob E
la source
1

Eh bien, en fait, il existe un moyen purement CSS de faire cela.

J'ai eu l'exemple de CSS Tricks, mais je l'ai également pris en charge dans Internet Explorer (je l'ai testé dans 10+).

Vérifiez la démo: 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
la source
Vous ajoutez des filtres exclusifs à IE uniquement dans des images clés spécifiques à Mozilla et à Webkit. En quoi est-ce une amélioration par rapport à la solution déjà acceptée? Il a même le même problème (dans les images 4 et 5, seuls les deux derniers et les derniers points sont visibles, respectivement, par opposition à ce qui est décrit dans la question, qui a 3 états répétés, pas 5)
xec
La question est de créer des points de chargement, et il y a juste un exemple proche, pas obligatoire. Ce que j'ai ajouté, ce sont des préfixes, afin que IE puisse mieux le reconnaître et l'afficher.
MRadev
3
-webkit-keyframesne s'appliquera qu'au kit Web, et à l'intérieur, vous avez du code uniquement pour IE. Ce code ne fait que perdre de l'espace.
xec
0

Voici ma solution avec pur css https://jsfiddle.net/pduc6jx5/1/ expliqué: 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
la source