Sehen Sie sich den folgenden Test in einem Desktop-Browser an ( JSFiddle ):
Sie bewegen den Mauszeiger über das Ankerelement und das span-Element wird eingeblendet, wie es sollte.
Sehen Sie sich jetzt ein iOS-Gerät an. Ergebnis: Es tut nichts.
Fakten:
Gibt es eine Problemumgehung?
Nur die Deckkraft beim Übergang ist saugt.
Da Sie auf dem iPhone tippen müssen, um ein Element zu fokussieren, habe ich mein Problem behoben:
%Vor%Ich habe den Opazitätsübergang zu: active hinzugefügt.
Auf diese Weise funktioniert es mit allen Übergangsanimationen (denken Sie daran, dass Sie die Animation auf Höhe oder etwas anderes anwenden möchten) auf Chrome, Firefox und iPhone (durch Tippen).
Danke an Grezzo und Michael Martin-Smucker für die Entdeckung des Opazitätsübergangs.
(Kopieren / Einfügen meiner Antwort von Sichtbarkeit der CSS-Animation: sichtbar; funktioniert in Chrome und Safari, aber nicht auf iOS )
Mit einigen kleineren Änderungen an der Eigenschaft transition kann dies unter iOS funktionieren. Bei :hover begrenzen Sie die transition auf die Eigenschaft opacity , so:
Obwohl Sichtbarkeit eine animierbare Eigenschaft ist , scheint es so ein Fehler in der iOS-Implementierung sein. Wenn Sie versuchen, visibility zu übergehen, scheint der gesamte Übergang nicht zu erfolgen. Wenn Sie Ihren Übergang einfach auf opacity beschränken, funktionieren die Dinge wie erwartet.
Um es klar zu sagen: Lassen Sie die Eigenschaft visibility in Ihrem CSS, versuchen Sie nicht, sie zu übergehen, wenn Sie möchten, dass die Dinge in Mobile Safari funktionieren.
Zur Referenz: Hier ist Ihre aktualisierte Geige , die ich auf einem iPad getestet habe:
Tags und Links css ios mobile css-transitions safari