Druckbare Version
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!
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?
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
Guten Moren liebe Community!
Irgendetwas habe ich scheinbar übersehen. Die Anpassungen habe ich alle gemacht.
Anhang 15225
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.
Anhang 15226
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
Du hast die Animationsdefinition immer noch in einem Media Query, nämlichKannst du das nicht entfernen? Oder fügt Contao das immer ein, wenn man interne Stylesheets benutzt.PHP-Code:@media screen {
...
}
Danke für die Antwort!
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.Zitat:
Oder fügt Contao das immer ein, wenn man interne Stylesheets benutzt.
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
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
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. Folgendessollte ja equivalent zuPHP-Code:@keyframes anim {
0% {
transform: translate(0, -100%);
}
100% {
transform: none;
}
}
sein, denke ich.PHP-Code:@keyframes anim {
from {
transform: translate(0, -100%);
}
to {
transform: none;
}
}
Laut W3C ist es wohl gleich welche Schreibweise man nutzt, solange die Definition richtig geschrieben ist.
Zitat:
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
% 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.Zitat:
Zitat von Spooky
Viele Grüße
Stefan