I have a #header
-element with margin: 0 auto
. I added a media-query:
@media screen and (max-width: 950px) {
#header {
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
margin-left: 0;
}
}
-moz
and -o
ignore the transition attributes: margin-left
is set immediately to 0
, while -webkit
behaves as expected.
When using a numeral instead of auto
, firefox and opera do apply the transition.
How do I make Mozilla and Opera apply the transition while still using auto
?
Using
-moz-transition: all 0.6s cubic-bezier(0, 0, 0.58, 1) 0s;
seems to work on Firefox on Ubuntu. (That's how Opera interpretedease-out
.) Try it on Windows.