IE 10 und 11 - Darstellungsproblem mit CSS Animations [gelöst]

[Stefan01]

Hallo liebe Community,


mittels CSS Animations habe ich eine Menünavigation gebaut, die im IE 11 aber nicht läuft, obwohl dieser CSS Animationen unterstützen sollte, laut Can I Use.

Die Seite um die es geht findet Ihr hier.

Für Hinweise bin ich wirklich sehr dankbar!


Viele Grüße

Stefan

[Stefan01]

Anscheinend bestand das Problem auch schon beim IE 1o da habe ich einige Beiträge gefunden. Aber das Problem wurde scheinbar im IE 11 behoben.
Der IE 10 nhatte wohl Probleme @keyframe Animationen, die in Media-Queries eingebundne waren richtig auszulesen.

Hier die links zu den Beiträgen:

http://stackoverflow.com/questions/1...on-not-working

http://stackoverflow.com/questions/1...-a-media-query

http://css-tricks.com/forums/topic/i...imation-issue/

Ich bin jetzt genau so schlau wie zuvor......

Vielleicht hatte ein anderes Community Mitglied bereits ein ähnliches Problem und kann mir hier auf die Sprünge helfen.
Wäre wirklich sehr nett, da das schon eine produktive Website ist.

Viele Grüße und schonmal Danke!

[Spooky]

Die Keyframe Definition musst du ja nicht in den media queries stehen haben. Definiere die Animationen mit unterschiedlichen Namen einfach außerhalb und per Media Query setzt du dann die richtige Animation fest.

Brauchst du überhaupt unbedingt verschiedene Animationen je nach Viewport Größe?

[Stefan01]

Das nenne ich mal schnell!

Vielen Dank @Spooky jetzt schon zum zweite Mal. Ich habe verschiedene Animationen in verschiedenen Stylesheets. Zwei Animationen erzeugen den Treppeneffekt beim Einblenden der Menüpunkte (jeweils eine Animation für die Startseite und eine Animation für die Folgeseiten (küzerer Intervall)). Eine Animation erzeugt die Menüleiste beim Aufruf der Startseite und dann noch die letze Animation, die den Texthintergrund (.mod_article) animiert, der aus der Menüleiste 'slidet' wenn deren Animation vollständig ist.

Für die Animationen habe ich insgesamt 3 Stylesheets die im jeweiligen Seitenlayout aktiviert bzw. deaktiviert sind (Startseite und Folgeseiten)
Die Media-Queries habe ich bei den Stylesheets mit den Animationen mittlerweile entfernt.

Der Grund für die verschiedenen Animationen ist, dass die Animationen je nach viewport-orientation (portrait bzw. landscape) verschiedene Größen benötigen. Kann sein, dass ich da zu kompliziert und umständlich an die Sache rangegangen bin. Wieder ein Punkt der für mobile-first spricht.

Ich werde mich mal durch meine CSS Daten arbeiten und Deinen Tipp befolgen. Wenn sich was getan hat poste ich hier umgehend die Lösung.


Viele Grüße


Stefan

[Stefan01]

Guten Moren liebe Community!

Irgendetwas habe ich scheinbar übersehen. Die Anpassungen habe ich alle gemacht.

screenshot1.jpg

Trotzdem stellt der IE die Navigation nicht richtig dar, obwohl der IE 11 das Problem mit den keyframes in den Media Queries eigentlich behoben haben sollte.

screenshot2.jpg

Laut eines anderen Tipps den ich über Google gefunden habe, sollten die CSS mit den Media-Queries zuerst geladen werden. Die @keyframe Animationen sind alle interne CSS Daten, die ich aber im Seitenlayout an die erste Position gebracht habe. Oder wäre es sinnvoll die ganzen keyframes in ein externes CSS file auszulagern und über einen zusätzlichen head-tag einzubinden?

Sehe gerade vor lauter Bäumen den Wald nicht mehr......

Viele Grüße

Stefan

[Spooky]

Du hast die Animationsdefinition immer noch in einem Media Query, nämlich

@media screen {
    ...
} 

Kannst du das nicht entfernen? Oder fügt Contao das immer ein, wenn man interne Stylesheets benutzt.

[Stefan01]

Danke für die Antwort!

Oder fügt Contao das immer ein, wenn man interne Stylesheets benutzt.

Das macht Contao automatisch, wenn ich die Medientypen weglasse bekomme ich eine Fehlermeldung. Also wird mir nichts anderes übrig bleiben, als die ganzen CSS files auszulagern.

Wäre es bei den keyframe Animationen besser mit from 0%...to 100%.. zu arbeiten?
Oder kann man das from.... to... mittlerweile vernachlässigen?



Viele Grüße

Stefan

[Stefan01]

Also erstmal ein riesen großes Dankeschön an Spooky für die schnelle und perfekte Unterstützung!

Das Problem lag wirklich daran, die Animationen auszulagern und vor den restlichen Stylesheets zu laden, um den von Contao standardmäßig integrierten Medientyp zu umgehen.

Einfach die CSS files runterladen und mittels Dateiverwaltung wieder importieren und dann im Seitenlayout über 'Externe Stylesheets' einbinden.

Viele Grüße


Stefan

[Spooky]

Hm, habe nur begrenzt Erfahrung mit keyframe Animations. Ich denke ob du from/to oder 0% ... 100% einsetzt hängt davon ab, was du machen möchtest. Folgendes

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

  100% {
    transform: none;
  }
} 

sollte ja equivalent zu

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

  to {
    transform: none;
  }
} 

sein, denke ich.

[Stefan01]

Laut W3C ist es wohl gleich welche Schreibweise man nutzt, solange die Definition richtig geschrieben ist.

The keyword ‘from’ is equivalent to the value ‘0%’. The keyword ‘to’ is equivalent to the value ‘100%’. Note that the percentage unit specifier must be used on percentage values. Therefore, ‘0’ is an invalid keyframe selector.

Viele Grüße

Stefan

[Spooky]

% brauchst du halt dann, wenn du auch Zwischenschritte hast.

[Stefan01]

% brauchst du halt dann, wenn du auch Zwischenschritte hast.

Genau, ist aber wohl bei den meisten keyframe Animationen der Fall, sonst hätte ich mit transitions gearbeitet. Aber da in meinem Fall die Animationen selbständig ablaufen sollten und nicht erst durch einen event wie :hover (hätte ich auch mit einer onload Funktion lösen können, aber da bin ich einfach nocht nicht fit, da es meine erste CSS Animation ist) habe ich mich eben für die keyframe Varainate entschieden.


Viele Grüße

Stefan