Issue with css color transition delay

Question

I'm working on this small project (see the CodePen) and, apart from many other things, trying to make the div.artMaintext gradually appear after the div is resized, but for some reason the transition: color 850ms on line 48 is getting ignored.

Is something overriding it somewhere that I fail to see?

Any thoughts are much appreciated!

Which browser are you using? You may need to add browser specific CSS e.g. for Chrome -webkit-transition: color 850ms — L4zl0w, Jun 17 '14 at 21:32

score 0 · Answer 1 · answered Jun 17 '14 at 21:37

0

Add this after line 48:

-webkit-transition: color 850ms;
-moz-transition: color 850ms;
-o-transition: color 850ms;
-ms-transition: color 850ms;

Make sure you use the starting dash '-'

answered Jun 17 '14 at 21:37

L4zl0w

1,069
4
15
42

I use transition without prefixes on lines 14 and 25 and it does work, so I don't think it's a browser issue. – Valentin Berlin Jun 17 '14 at 21:44
Have a look here: http://stackoverflow.com/questions/4411306/css3-transition-of-background-color – L4zl0w Jun 18 '14 at 10:56

score 0 · Answer 2 · answered Jun 18 '14 at 11:38

I figured it out.

It seems that if the initial display property is set to none all the following CSS for the object is not applied. So instead I used minuscule height on line 44 to hide the div and after that transition started working.

Thanks for all the suggestions!

Issue with css color transition delay

2 Answers2