[FIXED] Wie verblassen Sie mehrere Texte mit CSS/JQuery wie auf Droptlr?

Ausgabe

Ich habe diese Art von Animation auf einer Website gesehen, als CSS3-Keyframes gerade an Fahrt gewannen, konnte sie aber weder finden noch mit CSS oder jQuery replizieren, und hier dachte ich, einige von Ihnen könnten helfen.

Ich habe animiert, was ich zu erreichen hoffe, und ich habe es unten eingebettet. Ich glaube, dass dies mit den neuen CSS3-Keyframes oder jQuerys .animate() codiert werden kann; Besonderheit. Ich weiß nicht. Ich habe alles versucht, was ich weiß, aber alles umsonst.

Hier ist die GIF-Animation von dem, was ich wollte:

Mir ist gerade aufgefallen, dass http://droplr.com/ einen sehr ähnlichen Übergang auf ihrer Homepage verwendet, aber mit ein paar Gleiteffekten. Und die Daten (Wörter), die auftauchen, sind alle zufällig, die ganze Zeit. Ich möchte wissen, wie das möglich ist!

Lösung

Ich weiß, dass diese Frage gelöst ist, aber ich dachte, es könnte für jemand anderen hilfreich sein, also habe ich beschlossen, xD zu teilen

Ich suchte nach etwas Glatterem als dem hier vorgestellten Vorschlag, nachdem ich einige Zeit mit der Suche verbracht hatte, machte ich meine eigene Lösung

Hier müssen wir ein wenig an die Zeitleiste eines Keyframes denken, in diesem Fall wird der Text erst angezeigt, wenn der andere seine Fade-Animation bereits abgeschlossen hat

div{
  posititon: relative;
}
.js-nametag{
  position: absolute;
}
.js-nametag:nth-child(1){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;  
}


.js-nametag:nth-child(2){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes fade{
    0%,50% {
      opacity: 0;
}
    100%{
      opacity: 1;
  }
}

  <p class="js-nametag">Leandro de Lima</p>
  <p class="js-nametag">Game Master</p>

https://codepen.io/theNewt/details/PdWeKX

Beantwortet von – Leandro Lima

Antwort geprüft von – Dawn Plyler (FixError Volunteer)