it-swarm.com.de

Gibt es überhaupt eine Ellipsis mit CSS-Animationen zu animieren?

Ich versuche, eine Ellipsis-Animation zu erstellen, und habe mich gefragt, ob dies mit CSS-Animationen möglich wäre ...

So könnte es sein

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

Und im Grunde einfach so weitermachen. Irgendwelche Ideen?

Edit: wie folgt: http://playground.magicrising.de/demo/Ellipsis.html

75
Rey

Wie wäre es mit einer leicht modifizierten Version von @ xecs Antwort : http://codepen.io/thetallweeks/pen/yybGra

HTML

Eine einzelne Klasse wurde dem Element hinzugefügt:

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

CSS

Animation, die steps verwendet. Siehe MDN-Dokumente

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

Die Antwort von @ xec hat eher einen Slide-In-Effekt auf die Punkte, während die Punkte auf diese Weise sofort angezeigt werden.

69
thetallweeks

Sie könnten versuchen, den animation-delay property zu verwenden und jedes Ellipsis-Zeichen zu bestimmen. In diesem Fall habe ich jedes Ellipsis-Zeichen in einen <span class> eingefügt, damit ich sie separat animieren kann. 

Ich habe ein - Demo gemacht, das nicht perfekt ist, aber es zeigt zumindest was ich meine :)

Der Code aus meinem Beispiel:

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

Sogar eine einfachere Lösung funktioniert ziemlich gut!

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

Bearbeiten Sie den Inhalt einfach mit einer Animation, anstatt einige Punkte zu verbergen ...

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


Edit: Danke an @BradCollins für den Hinweis, dass content keine animierbare Eigenschaft ist.

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

Dies ist also eine reine WebKit/Blink/Electron-Lösung. (Funktioniert aber auch in aktuellen FF-Versionen)

24
CodeBrauer

Kurze Antwort ist "nicht wirklich". Sie können jedoch mit animierter Breite und ausgeblendetem Überlauf herumspielen und möglicherweise einen Effekt erzielen, der "nahe genug" ist. (Code unten nur für Firefox angepasst, fügen Sie nach Bedarf Herstellerpräfixe hinzu).

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/

edit

Es scheint, dass Chrome Probleme mit der Animation des Pseudoelements hat. Eine einfache Lösung besteht darin, die Ellipsis in ein eigenes Element einzuwickeln. Check out http://jsfiddle.net/MDzsR/4/

15
xec

Tatsächlich gibt es dafür eine reine CSS-Methode. 

Ich habe das Beispiel von CSS-Tricks erhalten, habe es aber auch in Internet Explorer unterstützt (ich habe es in 10+ getestet).

Überprüfen Sie die 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;
}
1
MRadev

Hier ist meine Lösung mit reinem CSS https://jsfiddle.net/pduc6jx5/1/ erklärt: https://medium.com/@lastseeds/create-text-Ellipsis-animation) -mit-reinem-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

Eine späte Ergänzung, aber ich habe einen Weg gefunden, der zentrierten Text unterstützt.

<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

Sie können clip animieren (oder besser clip-path, wenn Sie keine IE Unterstützung benötigen)

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