• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Text Animation

B

brickmaker

Neues Mitglied
Hallo zusammen,

ich versuche gerade 3 Zeilen horizontal mittig zentrierten Text per CSS durch die anderen Zeilen zu ersetzen.

Step 1:
Mittig zentriert soll "Text 1" eingeblendet werden. Bleibt 3 Sekunden stehen; dann:

Step 2:
"Text 1" wird ausgeblendet und "Text 2" an dieselbe Stelle eingeblendet. Bleibt 3 Sekunden stehen; dann:

Step 3:
"Text 2" wird ausgeblendet und "Text 3" an dieselbe Stelle eingeblendet. Dieser bleibt stehen, Animation beendet.

Kann mir vielleicht mal jemand auf die Sprünge dabei helfen? Ich versuche es gerade mit .animate, aber richtig klappt es leider nicht wirklich.

Danke vorab!!!
 
So sieht es im Moment aus:


Code: 
<html>

<head>
    <title>title</title>

    <meta http-equiv="Content-Language" content="de">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

    <style type="text/css">
    
    body{margin:0px; padding:0px; background: #ffffff;}
        
   .animate {
       display: inline;
       margin: 0;
       padding: 0;
       border: 0;
   }
  
   .animate:before {
       content: 'Text 1';
       -webkit-animation-name: animate;
       -webkit-animation-duration: 2s;
       animation-name: animate;
       animation-duration: 2s;
       animation-delay: 1s;
       animation-iteration-count: infinite;
   }
  
   @keyframes animate {
       0% {
           content: 'Text 2';
       }
       100% {
           content: 'Text 3';

   }
        
    </style>

</head>
<body>
        
        <div class="animate"></div>

</body>
</html>

Der Punkt ist, dass ich gerne eine kleine Animation hätte. Nur, dass der Text ein wenig wie ein Fader den anderen ablöst. Also wie übergeblendet wird. Nicht so 100% sofort Text 2 den Text 1 ersetzt, sondern ein wenig softer.
Und am Ende beginnt es von vorne, dass benötige ich auch nicht. Der Text 3 kann stehen bleiben, dann ist die Animation beendet.
 
Ach, und irgendwie sind leider die Zeiten auch etwas verschoben. Ich hätte gerne, dass Text 1 und Text 2 jeweils 5 Sekunden stehen bleiben und Text 3 ja dann sowieso, denn mit Text 3 ist ja die Animation beendet, Text 3 bleibt dann dauerhaft stehen.
 
Oh je... ich fürchte ich bin da leider ein wenig überfordert :)
Ich bin noch recht unbewandert im Thema und wäre dir sehr dankbar, wenn Du mir vielleicht mit einem Code weiterhelfen könntest.

Das mit den DIVs in den Animate Container habe ich so verstanden:

Code: 
        <div class="animate">
   
        <div class="Container1">Text 1</div>
        <div class="Container2">Text 2</div>
        <div class="Container3">Text 3</div>
       
        </div>

Aber mit dem Rest weiß ich wirklich nicht weiter. Könntest Du mir helfen?
 
Ah, super... so langsam steige ich dahinter, wie das funktioniert :) Danke schonmal bis hierher.
Und was genau ist zu tun, um den Hintergrund transparent zu bekommen? Das bräuchte ich
nämlich tatsächlich noch.

Aber mit Deinem Vorschlag geht das echt besser. Da wäre ich nie hingekommen.
 
Genau genommen kämpfe ich gerade mit 2 noch offenen Punkten.
Zum einen die Transparenz, zum anderen benötige ich das DIV noch horizontal zentriert.
Hier grätscht mir allerdings das position:absolute dazwischen, auf das ich aber auch nicht verzichten kann. Im Moment fehlt mir zu beiden Punkten aber jeder Ansatzpunkt. Etwas weiter bin ich bei der Anzeigedauer. Das habe ich - denke ich - inzwischen verstanden. Zu den beiden anderen Punkten wäre ich für Hilfe aber echt dankbar. Da weiß ich gar nicht, wie ich das bewerkstelligen soll. Auch Dein Hinweis mit der zweiten Animation bringt mir da gerade gar keine Erleuchtung. Wärst Du vielleicht so nett und würdest mir zu den beiden Punkten weiterhelfen?
Vielen lieben Dank vorab.
 
Zuletzt bearbeitet:
Danke Dir. Das hätte ich nicht hinbekommen. Ich habs die ganze Zeit versucht, aber das hätte nicht geschafft.
Danke @Sempervivum

Das zentrieren klappt aber nicht. Ist immer noch oben links. Mir würde ein reines horizontales reichen.
 
Ich habe es nun hinbekommen und es klappt. Meine Güte... aber so easy ist das nicht, dass Konstrukt zu durchschauen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben