CSS transition problem - need help.

[Vlad]

Hi all,

I have been trying to fix a cross-browser compatibility issue on my coursework page. The problem comes from the transition effect of CSS3 and it occurs on every browser apart from firefox (very strange). The rounded rectangles on the page are supposed to slowly transition colour to yellow and increase 'border-radius' to form an ellipse. In firefox both transitions work as they should. In every other only the 'background-color' changes properly - the border transitions instantly instead of slow linear change.

Does anyone have any ideas? I do not see anything wrong with the code. I have tried to look for a solution online but nothing relevant came up.

[Vlad]

I have just found out what the problem is - it is the code. I have tried to transition a border-radius:25px into border-radius:100% it appears that the browsers apart from Firefox cannot transition px -> % it has to be px -> px or % -> %. I have not tried % -> px but I would assume that it is not supported as well.

Very strange that only the Firefox guys have implemented it. In my opinion it should be supported by all browsers.

[blues_driven]

That's a great effect, like the font too

[Vlad]

Thank you