ajax - CSS Animation, State change finish animation -

we implementing wishlist functionality on site developing, , when user clicks on icon add current item wishlist, fires ajax request.

now while ajax request doing it's business, add loading class icon, scales bigger , smaller slightly. issue, once ajax request has finished loading, remove class, animation abruptly stops rather scaling down it's initial size.

how can make animation finish, rather stopping?

below css:

/**  * keyframes  */ @keyframes breathe {      50% {         transform: scale(1.2);     }      100% {         transform: scale(1);     } }    /**  * icon  */ .wishlist-icn {     transition: .3s ease; }      .wishlist-icn--isadded {         fill: #4b3814;     }      .wishlist-icn--isloading {         animation: breathe 2s ease-in-out 0s infinite normal both;     } 

tl;dr: try applying animation-fill-mode: forwards

the normal behavior after css animation done resets styles initial state. way see process here when remove --isloading class animation stops , reverts styles original state. after transitions starts work , has nothing since styles reset. animation-fill-mode: forwards in .wishlist-icn prevent animation resetting, transition able operate gradually. sure can add transform: scale(1) .wishlist-icn or :not(.wishlist-icn--isloading) transition knew head for. not have tested in particular case, it's worth trying ;p