问题
If you look at my page http://debourg-dev.ch/crea/ you will see the transition effects on my links don't work in safari (tested on latest version on mac). My code is the following:
a {
color: inherit;
text-decoration: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
What is the problem?
回答1:
It seems Safari has a bug and chokes on transition: all; (or just transition: Xs; because 'all' is the default property). It even crashes some versions of desktop and iOS Safari.
SOLUTION: Change it to transition: color 0.5s ease-in-out;
(Or, of course any other property, just make sure it's not 'all'.)
It could also be a problem specifically with the transition being applied globally to anchor tags - read more here
More about Safari crashing
And here
回答2:
The transition appears to be working for me when running OSX 10.9.1 and Safari 7.0.1. If I had to guess, the issue is likely due to cacheing. Try clearing your cache and see if the problem persists.
回答3:
For Safari try the following:
-webkit-transition: 190ms width linear;
where width represents the property being changed, prevent use of all as different browsers interpret this differently and can cause issues especially in Safari browser.
来源：https://stackoverflow.com/questions/21767037/css-transitions-not-working-in-safari