Existe-t-il un moyen d'animer une ellipse avec des animations CSS ?

Question

J'essaie de faire animer une ellipse, et je me demandais si c'était possible avec les animations CSS...

Donc ça pourrait être comme

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

Et continuer comme ça. Des idées ?

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

Answer 1

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 les documents MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function#The_steps()_class_of_timing-functions)

.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 plus un effet de glissement sur les points, tandis que celle-ci permet aux points d'apparaître instantanément.

Answer 2

Vous pourriez essayer d'utiliser le animation-delay property et chronométrer chaque caractère d'ellipse. Dans ce cas, j'ai placé chaque caractère d'ellipse dans un fichier <span class> pour que je puisse les animer séparément.

J'ai fait un Démo ce qui n'est pas parfait, mais qui 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;
    }
}

Answer 3

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>

J'ai juste édité le contenu avec une animation au lieu de cacher certains points...

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

---

Edit : Merci à @BradCollins pour avoir souligné que content es pas une propriété animable .

Actuellement (2021), cela fonctionne dans Chrome/WebKit/Blink/Electron et Firefox et la nouvelle version de Edge.

Answer 4

La réponse courte est "pas vraiment". Cependant, vous pouvez jouer avec l'animation de la largeur et de l'overflow caché, et peut-être obtenir un effet qui est "assez proche". (le code ci-dessous est adapté pour firefox uniquement, ajoutez les préfixes des fournisseurs 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/

editar

Il semble que chrome ait des problèmes avec l'animation du pseudo-élément. Une solution facile est d'envelopper l'ellipse dans son propre élément. Consultez le site http://jsfiddle.net/MDzsR/4/

Answer 5

Un ajout tardif, mais j'ai trouvé un moyen de faire ceci qui supporte 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: '...';
    }
}