使用渐变图标

Question

我正试图在图标上进行ease-in-out转换，但只有当它缓和时才会有效。当缓和时它变黑，然后恢复正常 as shown in this gif

.link {
  text-decoration: none;
  color: #000;
  transition: 0.2s ease-in-out;
}

#insta:hover {
  background: #f09433;
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

#face:hover {
  color: red;
}

<a class="link" id="insta" href="#">Instagram</a>

<a class="link" id="face" href="#">Facebook</a>