Master Slider Thumbnails grayscale-color hover

I would like to implement a function in Master Slider on my site:

Add grayscale effects to thumbnails (colour on hover – as in the example here: http://www.artch.ca/jig)

I try to use the code below. Alas it does not provide me the same smooth transition as in the example above.
What has to be improved/changed/added to achieve the effect?

/**
Modification grayscale
*/

.ms-thumb-frame.ms-thumb-frame-selected img {
filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter …\’1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\’/></filter></svg>#grayscale”);
-webkit-filter: grayscale(0%);
filter: grayscale(0);
}
img.ms-thumb {
filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter id=\’grayscale\’><feColorMatrix type=\’matrix\’ values=\’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\’/></filter></svg>#grayscale”);
/* Firefox 10+, Firefox on Android */
filter: gray;
-webkit-filter: grayscale(100%);
transition: 0.90s ease-in;
-webkit-transition: .5s ease-in-out;
-moz-transition: 0.90s ease-in-out;
-webkit-transition-delay: 2s;
}
img.ms-thumb:hover {
filter: url(“data:image/svg+xml;utf8,<svg xmlns=\’http://www.w3.org/2000/svg\’><filter id=\’grayscale\’><feColorMatrix type=\’matrix\’ values=\’1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\’/></filter></svg>#grayscale”);
-webkit-filter: grayscale(0%);
}
/**
thumbnails left
*/

.ms-thumbs-cont {
left: 0px !important;
}

I will deeply appreciate any assistance.