Animation mit CSS beim Laden von Tabs

    Ich hielt das für zu schade, um in einem Github-Issue zu versauern, und wollte es hier vorstellen.

    Ich habe bis inkl. Fx 56 eine Fortschrittsanzeige im Tab, wenn er neu geladen wird. Ich wollte so etwas Ähnliches auch für Fx 57 haben und suchte erst nach Addons, die das bieten könnten, fand aber nur Load Progress Bar. Dieses fügt eine solche Anzeige in den Seitenkopf ein, nicht aber in den Tabreiter. Der größte Nachteil daran ist, dass man das nur sehen kann, wenn der entsprechende Tab aktiv ist.

    Daraufhin dachte ich an CSS-Animationen, die ich im standardmäßig zu sehenden Balken am oberen Rand der Tabs ablaufen lassen wollte. Dummerweise stimmt das mit der Sichtbarkeit aber nur für aktive und gehoverte Tabs. Ich versuchte, die entsprechenden Einstellungen zu überschreiben, war aber nicht erfolgreich und fragte Aris, ob er eine Idee hätte. Er arbeitete daraufhin „wie ein Berserker“ und präsentierte ein („Monster“-)Beispiel, mit dem ich arbeiten konnte, obwohl er mit einer transition arbeitet. Es lohnt sich übrigens, dieses Beispiel einmal vollständig in die eigene userChrome.css zu kopieren und die Auswirkungen anzusehen, auch wenn man es vermutlich noch optimieren könnte; es enthält nebenbei auch gefärbte Tablines für aktive und inaktive Tabs.

    Hier nun der Code für „meine“ Animation:
    (Noch einaml explizit erwähnt: Das gehört in die userChrome.css oder einen dort importierten Stil.)

    Die Farben (#0033FF und #CCFFFF) kann man sich natürlich selbst anpassen, ebenso die Startbreite des Balkens/hellen Bereichs (die Werte für 49% bzw. 51% vergrößern) – wichtig dabei ist aber, dass man dann auch den Scalefaktor verändern sollte (je breiter der aufgehellte Bereich, desto weniger Scalefaktor), sonst sieht man für größere Anteile der Animation nur noch irgendetwas Breiiges; gemeint ist der Zahlenwert in scaleX(100), den anderen sollte man lieber nicht ändern. Die Geschwindigkeit ändert man durch eine andere Zeitangabe (hier 1s); man kann auch Millisekunden angeben, also z.B. 1000ms.

    Man kann noch viel mehr Animationen mit reinem CSS erzeugen, ist dabei aber auf eine Liste animierbarer CSS-Eigenschaften beschränkt, siehe dazu die Liste animierbarer Eigenschaften (SelffHTML-Wiki) oder die englische Primärquelle CSS Transitions – Animatable properties (W3C). Mein ursprünglicher Plan, einen Balken auf der Linie wandern zu lassen, indem ich während der Animation die Werte im linear-gradient verändere, ist beispielsweise nicht möglich, weil background-image nicht zu den animierbaren Eigenschaften zählt. (Ich hätte mir theoretisch aber eine separate Bilddatei erzeugen und als Hintergrundbild einfügen können, z.B. als SVG, die ich dann per background-position hätte verschieben können.)

    Zum Testen die Regeln, die in die Animation sollen, einzeln austesten, hier im Beispiel am besten im aktiven, selektierten Tab (zusammen mit den anderen nötigen Regeln).

    CSS
    .tabbrowser-tab > .tab-stack > .tab-background > .tab-line[selected="true"] {
  background-color: #0033FF !important;
  background-image: linear-gradient(to right, transparent 49%, #CCFFFF 50%, transparent 51%) !important;
  transform: scaleX(100);
}


    Dann anpassen, wie man es sich wünscht, und in die Animationsdefinition verschieben. ( scaleX(1) ist der Standard und muss deshalb nicht getestet werden.)

    Für Leute, die es bunt mögen, hier noch eine andere Animation, die (fast) den Regenbogen in der Tabline durchwandert. Da sie beim Laden von Tabs nicht zur Geltung kommt (es sei denn, die geladene Seite wäre sehr schlecht oder gar nicht erreichbar und das Laden würde dementsprechend lange dauern), habe ich sie im Code unten auf den aktiven Tab angewandt:


    Die Animation ist hier nach einer halben Minute einmal durch den Farbkreis gewandert. Man könnte die Angaben wohl auch kürzen, dann wäre aber die Farbgenauigkeit geringer (zum Test mal nur 0%, 50% und 100% aktiv lassen).

    Wenn man übrigens die Höhe der Tabline ändern will, einfach

    CSS
    .tab-line {
  height: 2px !important;
}


    einfügen, am besten schon vor den obigen Regeln - die hier zu sehenden 2px sind der Standard.