Und bitte die Definitionen, um das ganze mit anderen Browsern kompatibel zu machen, nicht vergessen.
Beispiel für Chrome/Safari:
CSS
@-webkit-keyframes marquee {
0% { text-indent: 0% }
100% { text-indent: 100% }
}
@keyframes marquee {
0% { text-indent: 0% }
100% { text-indent: 100% }
}
.marquee {
width: 100px;
margin: auto;
padding: 2px;
overflow: hidden;
white-space: nowrap;
border: solid 1px #CCCCCC;
animation: marquee 10s linear infinite;
-webkit-animation: marquee 10s linear infinite;
}
.marquee:hover {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}Bei sowas mit Keyframes zu arbeiten ist etwas unsauber und das spiegelt sich auch in der
Darstellung wieder.
Führt man das ganze im Chrome aus, läuft der Text wie von der Tarantel gestochen schnell nach recht, ist eine lange Zeit nicht mehr zu sehen und
taucht erst wieder nach den 10 Sekunden wieder auf. Führt man das ganze aber im Firefox auf, ist der Text schön langsam und taucht auch wieder auf, wenn dieser
grade verschwunden ist.
Ich empfehle dir also an der Stelle Javascript zu verwenden und diese Methode nur als Fallback,
falls der Benutzer mal kein Javascript aktiviert hat.
Mit freundlichen Füßen, Re3ker