1

For some reason, my animation will transition to a new background color, but it won't actually ease in, no matter if I put .8s or 5s, it just won't ease in for me.

Thanks for any help!

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>
Kelsey Maria
  • 53
  • 1
  • 8
  • you cannot animate gradient – Temani Afif Jun 16 '18 at 17:21
  • I've seen examples of it being animated by keyframes, but not by hovering. – Kelsey Maria Jun 16 '18 at 17:27
  • you cannot have transition between two linear-gradient .. but there is many work around, you can animation other properties, check the duplicate question and you will get more information ;) – Temani Afif Jun 16 '18 at 17:28
  • I've found [**another method**](https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759) which seems fairly simple (no need for additional elements) – Jos van Weesel Jun 16 '18 at 17:28

0 Answers0