Lauftext / css marquee / commit "completed CSS file" c249a7e2a2bc8cdaea50ad7328b

[robertPI]

Hallo setstate,

1. Danke!

2. Danke!

und dann noch eine Kleinigkeit:
im o.g. commit https://github.com/knowthelist/fhem-tablet-ui/commit/c249a7e2a2bc8cdaea50ad7328b87138af599e10#diff-0d4947d75566cda636dde54ce99ac934 ist folgender code im fhem-tablet-ui.css hinzu gekommen:

Code Auswählen Erweitern

+@-webkit-keyframes marquee {
+ 0%   { text-indent: 100% }
+ 100% { text-indent: 0% }
+}
+@keyframes marquee {
+ 0%   { text-indent: 100% }
+ 100% { text-indent: 0% }
+}
+.marquee {
+ width: 100%;
+ margin: auto;
+ padding: 2px;
+ overflow: hidden;
+ white-space: nowrap;
+     animation: marquee 10s linear infinite;
+    -webkit-animation: marquee 10s linear infinite;
+}

Leider kommt damit bei mir nur ein "halber" Lauftext zustande. Der Text läuft von rechts ein, verschwindet aber sofort wenn er den linken Rand erreicht hat. Von meinen Bahn Verspätungsmeldungen fehlt somit immer ein Stück
siehe auch

Die Schrift läuft von rechts nach links und sie den linken Rand berührt geht es von
vorne los anstatt durchzulaufen. Wo kann man das einstellen ?

Ich hatte in meiner Unwissenheit folgendes ergooglet (schreckliches Wort). Der Lauftext läuft unter Chrome, Firefox und fully wie gewünscht. Vielleicht kannst du ja den code korrigieren bzw. verallgemeinern und übernehmen?

index.html

Code Auswählen Erweitern

<div class="marquee"><span><div data-type="label" data-device="oeffi_ToWork" data-get="travel_note_text_1" data-substitution="s/none//g"></div></span></div>

mystyle.css (muss natürlich in der index.html geladen werden)

Code Auswählen Erweitern

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

.marquee {
width: 250px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
/* border: 1px red solid; */
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    /* border: 1px green solid; */
    animation: marquee 10s linear infinite;
     -webkit-animation: marquee 10s linear infinite;
}

Robert