Hallo Stef,
danke für deine Antwort. Media Querie ist klar, aber wie muss es exakt zum Beispiel für diese css-Anweisung für Desktops größer 1400 px lauten?
@keyframes marquee {
0% { text-indent: 100% }
100% { text-indent: -450% }
}
Bei mir klappt das einfach nicht. Irgendwie übersehe ich da was.
DANKE!!!
AnaLisa
Danke für deine Antwort. Mit delay habe ich es schon probiert. Da ist das Problem, dass der Text von Anfang an bereits dasteht und sich nach der eingestellten Zeit nochmal neu aufbaut. Ich möchte aber, dass der Text zum ersten Mal sichtbar wird, nachdem sich die beiden Dreiecke auseinander bewegt haben. Ich hoffe, das ist so verständlich.
Evtl. habe ich auch einen Knoten im Hirn. 
Hallo zusammen,
habe noch eine Frage zu dieser Animation:
Der Text soll erst nach den Dreiecken erscheinen. Also, folgender Ablauf. Zunächst sind das blaue und rote Dreieck in der Mitte zusammen als Quadrat, diese öffnen sich und bleiben außen stehen und erst dann erscheint der Text.
Leider schaffe ich es nicht, dies zu realisieren. Kann mich da jemand unterstützen?
<style type="text/css">
body {
text-align: center;
}
p.slogan {
text-align: center;
z-index: 800;
animation: text 2s;
font-size: 130%;
}
.center {
z-index: 10;
position: absolute;
left: 50%;
right: 50%;
}
#dreieck-blau {
width: 0;
height: 0;
border-right: 4em solid rgba(48,95,159,0.3);
border-top: 4em solid rgba(48,95,159,0.3);
border-bottom: 4em solid transparent;
border-left: 4em solid transparent;
animation: blau 5s;
animation-fill-mode: forwards;
}
#dreieck-rot {
width: 0;
height: 0;
border-left: 4em solid rgba(220,35,40,0.3);
border-top: 4em solid transparent;
border-bottom: 4em solid rgba(220,35,40,0.3);
border-right: 4em solid transparent;
float: left;
animation: rot 5s;
animation-fill-mode: forwards;
}
@keyframes blau {
0% {
transform: translate(0);
}
100% {
transform: translate(13em);
}
}
@keyframes rot {
0% {
transform: translate(0);
}
100% {
transform: translate(-18em);
}
}
@keyframes text {
0% {
font-size: 0%;
opacity: 1;
}
90% {
font-size: 130%;
opacity: 1;
}
100% {
font-size: 120%;
opacity: 1;
}
}
@-webkit-keyframes text {
0% {
color:white;
font-size: 0%;
opacity: 0;
}
90% {
font-size: 130%;
opacity: 1;
}
100% {
font-size: 120%;
}
}
</style>
<div class="center">
<div id="dreieck-rot"></div>
<div id="dreieck-blau"></div>
</div>
<div>
<p class="slogan"><strong>Text Text </strong>Text Text <br>und <strong>Text Text
Text Text Text Text</strong></p>
</div>Vielen Dank im Voraus.
AnaLisa