Transform-Dauer funktioniert nicht in Safari, aber arbeitet in Chrome

.cl-effect-10 a::before { 
    position: absolute; 
    display: inline-block; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    height: 40px; 
    width: 10px; 
    background:#00BFFF; 
    color: #ddd; 
    content: attr(data-hover); 
    -webkit-transition-property: width; 
    -webkit-transition-duration: 2s; 
    -webkit-transform: skew(-45deg, 0); 
    -moz-transform: skew(-45deg, 0); 
    -ms-transform: skew(-45deg, 0); 
    transform: skew(-45deg, 0); 
} 
.cl-effect-10 a:hover::before,.cl-effect-10 a:focus::before { 
    width: 100%; 
}

Transform-Dauer funktioniert nicht in Safari, funktioniert aber in Chrome. Ich möchte Sie um jede Art von Hilfe bitten.Transform-Dauer funktioniert nicht in Safari, aber arbeitet in Chrome

Vielen Dank im Voraus.

Quelle

2016-04-27 彭夹子

In welcher Version von Safari testen Sie? Wie können Sie feststellen, dass nur die Eigenschaft "transition-duration" angewendet wird und nicht alle "transition" -Eigenschaften? – Shaggy

Mein Safair ist Version 5.1.7, Sie haben Recht, Dies ist eine Frage der Version. Das ist dein Fortschritt !! –

Vor der Version 6.1, Safari nicht unterstützen transition auf ::before und ::after Pseudo-Elementen (source) so, wenn Sie als die in einer älteren Version zu testen sind, die für Ihr Problem ausmachen werden.

Übrigens funktionieren Ihre Übergänge mit dem in Ihrer Frage bereitgestellten CSS nur in Chrome & Safari, da Sie nur die -webkit- vorfixierte Version der Eigenschaften verwenden. Fast alle Browser (mit einer Ausnahme), die CSS-Übergänge unterstützen, unterstützen sie jetzt und haben seit einiger Zeit keine Präfixe mehr. Wenn Sie jedoch ältere Browser unterstützen müssen, verwenden Sie die Tabellen caniuse.com, um festzustellen, welche Präfixe Sie möglicherweise verwenden müssen.

Quelle

2016-04-27 10:04:26 Shaggy

Transform-Dauer funktioniert nicht in Safari, aber arbeitet in Chrome

Antwort

Verwandte Themen