谷歌Chrome @keyframes和过滤器

Question

我使用谷歌浏览器@keyframes时遇到问题。 我正在使用greyscale filter，我想将其停用，请@keyframes

该代码使用Mozilla Firefox运行良好，但无法使用Google Chrome。它不是从greyscale(40%)开始，而是从greyscale(100%)开始。

这是我的CSS：

.contact-icon{
    max-width: 120px;
    max-height: 120px;
    width: 20%;
    height: 20%;
    margin-left: 22px;
    margin-right: 22px;
    -webkit-filter: grayscale(40%);
    filter: grayscale(40%);
}

.contact-icon:hover{
    animation-name: selected-icon;
    animation-duration: 1s;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

@keyframes selected-icon{
    0% {-webkit-filter: grayscale(40%); filter: grayscale(40%); max-width: 120px; max-height: 120px;}
    100% {-webkit-filter: grayscale(0%); filter: grayscale(0%); max-width: 140px; max-height: 140px;}
}

我也尝试使用@-webkit-keyframes，但它给出了完全相同的结果。 我做了一些关于我使用Google Chrome的内容：

请注意，关键帧会随着图片的增长而执行。