CSS Text Animation

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

brickmaker

Neues Mitglied
29 Juli 2019
8
0
1
59
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!!!
 

brickmaker

Neues Mitglied
29 Juli 2019
8
0
1
59
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.
 

brickmaker

Neues Mitglied
29 Juli 2019
8
0
1
59
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.508
297
83
66
Verstehe. Ich fürchte nur, dass dir dieses Beispiel wenig nützen wird, weil es :before nur einmal an jedem Element geben kann.
Ich empfehle folgendes: Lege die drei Texte jeweils in einen div-Container und diese wiederum in dein div.animate. Dann die drei Container mit den Texten mit position:absolute; übereinander legen.
Wenn Du dann die opacity richtig animierst, kannst Du genau das Überblenden erreichen, was Du möchtest.
 

brickmaker

Neues Mitglied
29 Juli 2019
8
0
1
59
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?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.508
297
83
66
Sieh dir dies an und versuche, es zu verstehen:
Code:
    <div class="animate">
        <div id="text1">Text 1</div>
        <div id="text2">Text 2</div>
        <div id="text3">Text 3</div>
    </div>
    <style>
        .animate {
            position: relative;
        }

        .animate>div {
            opacity: 0;
            background-color: white;
            position: absolute;
            left: 0;
            top: 0;
            font-size: 5em;
        }

        #text1 {
            opacity: 1;
        }

        #text2 {
            animation: ani 3s forwards;
            animation-delay: 3s;
        }

        #text3 {
            animation: ani 3s forwards;
            animation-delay: 6s;
        }

        @keyframes ani {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }
    </style>
Ich habe es erst Mal mit weißem Hintergrund gemacht, weil es dann einfacher ist. Wenn das Ganze transparent sein soll, muss man die Animation noch etwas erweitern, dass das vorige Div ausgeblendet wird.
 

brickmaker

Neues Mitglied
29 Juli 2019
8
0
1
59
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.508
297
83
66
Wenn Du so langsam durchsteigst, kannst Du die Transparenz vielleicht selbst erledigen:
Die bisherige Animation erledigt ja nur das Einblenden. Ein Möglichkeit ist, für das Ausblenden ein zweite Animation zu machen und diese mit geeignetem Timing auf das erste und zweite Element anzuwenden. Das dritte nicht, da es ja dauerhaft sichtbar sein soll.
 

brickmaker

Neues Mitglied
29 Juli 2019
8
0
1
59
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:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.508
297
83
66
PS: Hier kannst Du nachlesen, dass Du zwei Animationen auf das selbe Element anwenden kannst:
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.508
297
83
66
Zentrieren kannst Du am einfachsten mit text-align:center; oder, vor allem wenn es auch vertikal sein soll, mit Flexlayout.
Mit den beiden Animationen würde es dann so aussehen:
Code:
    <div class="animate">
        <div id="text1">Text 1</div>
        <div id="text2">Text 2</div>
        <div id="text3">Text 3</div>
    </div>
    <style>
        .animate {
            position: relative;
        }

        .animate>div {
            text-align: center;
            opacity: 0;
            /* background-color: white; */
            position: absolute;
            left: 0;
            top: 0;
            font-size: 5em;
        }

        #text1 {
            opacity: 1;
            animation: fadeout 2s forwards;
            animation-delay: 3s;
        }

        #text2 {
            animation: fadein 2s forwards, fadeout 2s forwards;
            animation-delay: 3s, 6s;
        }

        #text3 {
            animation: fadein 2s forwards;
            animation-delay: 6s;
        }

        @keyframes fadein {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes fadeout {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }
    </style>
 

brickmaker

Neues Mitglied
29 Juli 2019
8
0
1
59
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.
 

brickmaker

Neues Mitglied
29 Juli 2019
8
0
1
59
Ich habe es nun hinbekommen und es klappt. Meine Güte... aber so easy ist das nicht, dass Konstrukt zu durchschauen.
 
Werbung: