Transitioning css

I  receive a task from the designer today to change background color of a nav bar when user scrolls down.
Cause without changing the background color things look pretty bad as the logo on the top left corner is white, hence it "hides" when you scroll through whitespace.

But then when I change background color, things happens too instantly and I find it pretty uncomfortable, hence after some digging and enquiring my senior, I found this.

http://css-tricks.com/almanac/properties/t/transition/

Which works like a charm :)

The syntax is

.example { transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; }
Hence the code is as follows:

.example { -webkit-transition: background-color 500ms ease; -moz-transition: background-color 500ms ease; -o-transition: background-color 500ms ease; transition: background-color 500ms ease; }