Delay change of color of a text during its movement

Question

So I'm trying to move a text (p) from the left side to the right by hovering nav and at the same time I want the text changes its color a second after the start of the move and it should finish during the movement. When I remove the pointer from nav the text should return to its original state. All works fine, however, I don't know how to delay ONLY the change of the color in the right way.

PS.: I want it with the GRAYSCALE!

Here is my Css

header nav p {
    z-index:-100;
    position:absolute;
    opacity:0;
    margin-top: -100px;
    right: 520px;
    float: right;
    font-size: 35px;
    transition: all 1s ease-in-out;
    -webkit-filter: grayscale(90%);
    color: blue;}

         a:hover + p{
        opacity: 100;
        -webkit-transform: translate(350px,0px);
        -webkit-filter:none;}

Thanks for each reply!

Answer 1

Change: transition: all 1s ease-in-out;

To

transition: -webkit-transform 1s ease-in-out, -webkit-filter 2s 1s ease-in-out;

You can target specific properties by seperating their transitions with a comma, in the above, the 2s is the delay for the filter.

See it in action