Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Malgorzata Dlugosz
Malgorzata Dlugosz
907 Points

Text-Shadow Transition in CSS3 - Mozilla

Hey I have this nice text-shadow effect.. unfortunately it doesn't work in Mozilla for some reason. Here's my code:

-webkit-transition:all ease 3s; -o-transition:all ease 3s; -moz-transition:all ease 3s;

and the element text-shadow: 0px 0px 2px white;

Plx help css masters =)

Neil Little
Neil Little
5,555 Points

Hey Malgorzata,

I believe that this should fix your problems:

(CodePen Example)[http://codepen.io/anon/pen/qndEG]

I have used compass a plugin to SCSS to generate the -moz- but it creates the following code, and It works for me in firefox.

-webkit-transition: text-shadow 3s ease;
-moz-transition: text-shadow 3s ease;
-o-transition: text-shadow 3s ease;
transition: text-shadow 3s ease;

I would note that if you are just focusing on animating the text-shadow I would use the code above as all captures all CSS!

Hope this helps.

James Barnett
James Barnett
39,199 Points

> I have used compass a plugin to SCSS to generate the -moz- but it creates the following code

That's what prefix free is for

Neil Little
Neil Little
5,555 Points

Yea you could use that. But in my opinion Compass will generate the needed prefixes without adding an additional JS plugin.

Also adding "@include" and wrapping the data in brackets is little work.

But I can see it being great on small websites.