I want to make an animation of changing words like here http://doyouimpress.com [14.04.2015 site topic]

This is what I have in my code

HTML

```

<h1 class="negative-topic">EXPERIENCE SERVICES OF 

  <span id="changing-word">SPECIAL</span><br /> REAL ESTATE AGENT

</h1>

```

JQUERY

```

(function(){

    // List your words here:

    var words = [

        'SPECIAL',

        'DILIGENT',

        'FRIENDLY',

        'WISE'

        ], i = 0;

    setInterval(function(){

        $('#changing-word').fadeOut(function(){

            $(this).html(words[i=(i+1)%words.length]).fadeIn();

        });

       // 2 seconds

    }, 2000);

})();

```

The code above works but I need some advices regarding it.

1)Using JQUEARY language how can I change color of these words? Eg. I'd like the FRIENDLY to be orange and WISE to be blue.

2)The mutual timer for change animation is 2 sec (2000). How is possible to let the SPECIAL word be 3s and all the rest only 1 seconds?

3)Should I rather use only CSS animations to achieve the desired effect or use JQUERY? I found nice tutorial here http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations also it seems that doyouimpress.com site is using something similar to the tympanus.net tutorial. Atleast I couldn't find any JQUERY events related to this animation. Comparing my jquery code with the tympanus tutorial JQ is much more clearer and have less code.

Thanks alot!