过渡不适用于 Instagram 背景渐变

Question

我有这个简单的代码

* { transition: all .7s ease }

.icons { margin-top: 1.5em; margin-bottom: 2em; }

.icons i {
    margin-left: 5px;
    font-size: 1.3em;
    transition: 0.5s;
    padding: 0.7em;
    color:#00b7ff;
    background-color: #322f30;
    border-radius: 10%;
}

.ytbe { padding: 0.7em 0.65em !important; }
.ytbe:hover { background-color: #ff0000; color: #fff; }
.gthb:hover { background-color: #5a32a3; color: #fff; }
.intgrm:hover { background-color: #f09433; color: #fff;
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }

.tlgrm:hover { background-color: #0088cc; color:#fff; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<div class="icons">
    <a href="#"><i class="fab fa-youtube ytbe"></i></a>
    <a href="#"><i class="fab fa-github gthb"></i></a>
    <a href="#"><i class="fab fa-instagram intgrm"></i></a>
  <a href="#"><i class="fab fa-telegram-plane tlgrm"></i></a>
</div>

但是当我将鼠标悬停在 Instagram 图标上时，未应用过渡并且颜色突然改变而没有任何过渡

知道为什么会发生这种情况吗？我该如何解决？

Answer 1

i {
  margin-left: 5px;
  font-size: 1.3em;
  transition: 0.5s;
  padding: 0.7em;
  color: #00b7ff;
  background-color: #322f30;
  border-radius: 10%;
}

.intgrm{
  --x:0px;
  background-size:var(--x) !important;
    background-color:#322f30 !important;
      background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% );
}
.intgrm:hover {
  --x :300%;
  color: #fff;
}

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <a href="#"><i class="fab fa-instagram intgrm"></i></a>

CSS 渐变不是 animatable。你需要使用一些 JS 库来获得像 granim.js 这样的效果，它可以让你制作渐变动画。

虽然使用 css 变量，但我确实找到了另一种方法：

过渡不适用于 Instagram 背景渐变

Transition not working on Instagram Background gradient

css

icons

gradient

css-transitions

instagram