# Animation Post-Effect

**URL:** <https://forum.freecodecamp.org/t/animation-post-effect/325824>\
**Category:** General\
**Created:** [November 7, 2019, 10:57pm UTC](https://forum.freecodecamp.org/t/animation-post-effect/325824 "2019-11-07T22:57:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![shaux](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shaux/32/122726_2.png) [@shaux](https://forum.freecodecamp.org/u/shaux)\
**Post date:** [November 7, 2019, 10:57pm UTC](https://forum.freecodecamp.org/t/animation-post-effect/325824/1 "2019-11-07T22:57:38Z")

</div>

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):

```auto
.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:

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

```

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [November 8, 2019, 12:31am UTC](https://forum.freecodecamp.org/t/animation-post-effect/325824/2 "2019-11-08T00:31:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![shaux](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shaux/32/122726_2.png) [@shaux](https://forum.freecodecamp.org/u/shaux)\
**Post date:** [November 8, 2019, 5:28pm UTC](https://forum.freecodecamp.org/t/animation-post-effect/325824/3 "2019-11-08T17:28:02Z")

</div>

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? 😅

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [November 8, 2019, 5:32pm UTC](https://forum.freecodecamp.org/t/animation-post-effect/325824/4 "2019-11-08T17:32:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 2:46pm UTC](https://forum.freecodecamp.org/t/animation-post-effect/325824/5 "2021-01-16T14:46:03Z")

</div>

Closed on January 16, 2021, 2:46pm UTC