Start a css animation and finish with another icon using (fa-awesome)

Using plain CSS and Javascript I want to:

Create a 'fa-heart-o' that animates a pulse when clicked.
and at last change to a solid heart 'fa-heart'.
Additional click should then reverse from 'fa-heart' -> animate -> 'fa-heart-o'.

The first part is working fine, with at timer resetting the animate-stile allowing it to 'replay'. But I can't figure out how to switch to 'fa-heart-o' is step 2) after 100% animation ?

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>

@keyframes fa-pulse-click {
  0%  { transform:scale(1); }
  50%  { transform:scale(1.50); }
  100% { transform:scale(1); }
}

.fa {
  font-size: 50px;
  cursor: pointer;
  user-select: none;
}

.fa:hover {
  color: gray;
}

body {
  text-align:center;
  background:white;
  color:black;
  font:1em sans-serif;
}

.heart {
  color:red;
}
</style>
</head>

<body>


<p>Click to pulse</p>
<span class="tooltip">
  <i id="pulse-click" onclick="startAni(this)" class="fa heart fa-heart-o fa-4x fa-pulse-click"></i>
</span>
</br>

<script>

var myHand = false;

function startAni(elem) {
    if (myHand) 
        clearTimeout(myHand);
    myHand = setTimeout(function(){ elem.style.animation = ''; }, 250);

    elem.style.animation = "fa-pulse-click 0.2s ease";
}
</script>


<p>Click on the icon to toggle between solid/open heart:</p>
<i onclick="myFunction(this)"class="fa heart fa-4x  fa-heart"></i>
<script>
    function myFunction(x) {
    x.classList.toggle("fa-heart-o");
    }
</script>

</body>
</html>

Solution

You just miss to use your function, and you have a typo in the className:

var myHand = false;

function startAni(elem) {
    if (myHand) 
        clearTimeout(myHand);
    myHand = setTimeout(function(){ animate(elem); }, 250);

    elem.style.animation = "fa-pulse-click 0.2s ease";
}

function animate(elem) {
  elem.style.animation = '';
  elem.classList.toggle("fa-heart-o");
  elem.classList.toggle("fa-heart");
}

@keyframes fa-pulse-click {
  0%  { transform:scale(1); }
  50%  { transform:scale(1.50); }
  100% { transform:scale(1); }
}

.fa {
  font-size: 50px;
  cursor: pointer;
  user-select: none;
}

.fa:hover {
  color: gray;
}

body {
  text-align:center;
  background:white;
  color:black;
  font:1em sans-serif;
}

.heart {
  color:red;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>


<p>Click to pulse</p>
<span class="tooltip">
  <i id="pulse-click" onclick="startAni(this)" class="fa heart fa-heart-o fa-4x fa-pulse-click"></i>
</span>
</br>


<p>Click on the icon to toggle between solid/open heart:</p>
<i onclick="myFunction(this)"class="fa heart fa-4x  fa-heart"></i>

</body>
</html>