html - 我的过渡会奏效，但不会缓和？

Question

出于某种原因，我的动画将过渡到新的背景颜色，但实际上不会缓和，无论我放 0.8 秒还是 5 秒，对我来说都不会缓和。

谢谢你的帮助！

div {
  margin: 50px
}

.toplinks a,
.middlelinks a,
.bottomlinks a {
  background: linear-gradient(#1cd0d0 10%, #79dcc5 80%, #3bbdb18c 100%);
  padding: 20px 20px 20px 0px;
  -webkit-transition: all 0.8s ease-in;
  transition: all 0.8s ease-in;
}

.toplinks a:hover,
.middlelinks a:hover,
.bottomlinks a:hover {
  background: linear-gradient(#0fe8e8 10%, #03d6c3 80%, #00ab938c 100%);
}

<div class="toplinks">
  <a href="/help" class="announcementhelp" <p class="phelplink"></p>Announcements</a>
</div>


<div class="middlelinks">
  <a href="/help" class="forumshophelp">
    <p class="phelplink"></p>Forums and Shops</a>
</div>


<div class="bottomlinks">
  <a href="/help" class="profilehelp">
    <p class="phelplink"></p>Your Profile &amp; Settings</a>
</div>

标签： htmlcssanimationtransition