title: executing function after running css animation
body: <p>I am trying to get this function</p>
  
  <pre><code>var rotations = 0
  function planet1rotate{
      rotations = rotations + 1
      document.getElementById('rotate').innerHTML = rotations
  }
  </code></pre>
  
  <p>to play after this animation</p>
  
  <pre><code>    @keyframes spin-right {
          100% {transform: rotate(360deg);}
      }
  </code></pre>
  
  <p>here is the whole code, if it helps</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;style type="text/css"&gt;
      #star{
          position: absolute;
          top: 50%;
          left: 50%;
          height: 100px;
          width: 100px;
          margin-top: -50px;
          margin-left: -50px;
          border-radius: 50%;
          background-color: red;
          animation: spin-right 2s linear infinite;  
      }
      @keyframes spin-right {
          100% {transform: rotate(360deg);}
      }
      #planet1{
          background-color: red;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          margin-top: -50px;
          margin-left: -50px;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script type="text/javascript"&gt;
      var rotations = 0
      function planet1rotate{
          rotations = rotations + 1
          document.getElementById('rotate').innerHTML = rotations
      }
  &lt;/script&gt;
  &lt;h1 id="rotate"&gt;&lt;/h1&gt;
  &lt;div id="star"&gt;
      &lt;div id="planet1"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>