css3 transition with margin-left auto in ff/opera

1.8k views Asked by At

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?

1

There are 1 answers

1
silvenon On

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 interpreted ease-out.) Try it on Windows.