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)