Hover ease in-out only works on IN

I've added some code to ease in and out the transition to colour on hover but it's only working on ease-in, not out. It's the big yellow text that says 'MOTION AND EMOTION' at the top of the home page. What am I doing wrong? This is the code I used:

/* Remove underline from links */
a {
text-decoration: none!important;
  &:hover {
      color: black;
  }
}

/* Change colour on hover and ease in/out */
h1 a:hover span {
    color: #ffffff !important;
    transition: 300ms ease-in-out;
}

17 hours ago, elmeto said:

I've added some code to ease in and out the transition to colour on hover but it's only working on ease-in, not out. It's the big yellow text that says 'MOTION AND EMOTION' at the top of the home page. What am I doing wrong? This is the code I used:

 

/* Remove underline from links */
a {
text-decoration: none!important;
  &:hover {
      color: black;
  }
}

/* Change colour on hover and ease in/out */
h1 a:hover span {
    color: #ffffff !important;
    transition: 300ms ease-in-out;
}

we should add the transition on un-hover state

/* Change colour on hover and ease in/out */
h1 a span {
    transition: 300ms ease-in-out;
}

Let me know how it works on your site

Hi, thanks very much for this. Unfortunately it didn't work. It added a weird transition whereby the H1 text transformed from tiny to huge!...

I had to remove it as the site is live but I'm attaching a screen recording. Any ideas why it would do that?

Thanks