Animation Post-Effect

1

I am trying to create a button and I added a transition property to ease in the hover state. Everything is fine when I hover over it, but once I take the mouse off it, the arrow sudden goes back. Why isn’t it following the transition property?

Here is the code (SASS):

.primary-btn {
  border: colors(col-dark-white) 0.2rem solid;
  background: none;
  color: colors(col-dark-white);
  width: 16vw;
  padding: 1.2rem;
  margin-top: 7rem;
  transition: all 0.5s;
  .fas {
    vertical-align: middle;
  }
  @include responsive(md) {
    width: 20vw;
  }
  @include responsive(sm) {
    width: 25vw;
  }
  &:hover {
    cursor: pointer;
    background: colors(col-dark-blue);
    border: colors(col-dark-blue) 0.2rem solid;
    .fas {
      transition: all 0.5s;
      transform: rotate(90deg);
    }
  }
}

Here is the HTML:

<a href="#"><button class="primary-btn h6" type="button">View More&nbsp;&nbsp;<i class="fas fa-angle-right"></i></button></a>
2

Need the transition on .fas when it isn’t hovered, that should fix it. It’s a transition to a state, so that’s why it works when you hover, you transition to hovered. But then hovered -> normal has no transition.

3

Thank you so much! Worked like a charm!

One more question, how do you recommend to code transitions? Use plain vanilla JavaScript, CSS, or an external library/framework? :sweat_smile:

1 Like
4

CSS as it’s the easiest by far and it’s normally extremely performant.

If you need to sequence things (ie do complex animations), it’s not good for that, and then use JS. And if that’s the case, use a library as it’s there are several very good ones that will likely work better than anything you can write. There is also the JS web animations API which is very good, but I’d still probably go for a library as the APIs are normally good.

1 Like