web-dev-qa-db-fra.com

Est-il possible d'animer un Ellipsis avec des animations CSS?

J'essaie d'avoir une animation Ellipsis et je me demandais si c'était possible avec les animations CSS ...

Donc ça pourrait être comme

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

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

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

csscss3css-animations
75
Rey

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 utilisant 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, ce qui permet aux points d'apparaître instantanément.

69
thetallweeks

Vous pouvez essayer d'utiliser le animation-delay property et chronométrer chaque caractère Ellipsis. Dans ce cas, j'ai mis chaque caractère Ellipsis dans un <span class> afin de pouvoir les animer séparément. 

J'ai fait un D&EACUTE;MO, 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;
    }
}
52
Christofer Vilander

Même une solution plus simple fonctionne assez 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>

Vient de modifier le contenu avec animation au lieu de cacher des points ...

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

Edit: Merci à @BradCollins pour avoir signalé que content n'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 aussi dans les versions actuelles de FF)

24
CodeBrauer

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". (le code ci-dessous est conçu pour Firefox uniquement, ajoutez les 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/

modifier

Il semble que chrome rencontre des problèmes d’animation du pseudo-élément. Une solution facile consiste à envelopper les Ellipsis dans son propre élément. Découvrez http://jsfiddle.net/MDzsR/4/

15
xec

Eh bien, en réalité, il existe une méthode purement CSS pour ce faire. 

J'ai eu l'exemple de CSS Tricks, mais je l'ai également fait pour être supporté 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;
}
1
MRadev

Voici ma solution avec le css pur 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>
0
repo

Un ajout tardif, mais j'ai trouvé un moyen de faire cela 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: '...';
    }
}
0
anon-e-mouse

Vous pouvez animer clip (ou mieux clip-path si vous n'avez pas besoin de l'aide de 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>
0
Jakob E