title: Count total amount of completed CSS animations
body: <p>On my webpage i have a small simple wheel-like icon in the top navigation bar which rotates 360 degree on hover and back when the mouse is removed via this CSS code:</p>
  
  <pre><code>.img-wheel{
  border-radius: 50%;
  border:5px solid &lt;?php echo $nav_text_color; ?&gt;;
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
  
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  
  overflow:hidden;
  }
  .img-wheel:hover {
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  </code></pre>
  
  <p>I want a counter next to it which shows how many times someone completed the whole animation (or, if easier, just how many times someone hovered over the wheel).
  Preferable it is an absolute total, so user 1 hovered once and the counter adds +1, than user 2 opens the site with the counter already on 1, user 2 hovers once and it will show a 2. User 1 comes back to the site and sees the counter on 2.</p>
  
  <p>Since the wheel is in the navigation bar the counter also shouldn't reset when another page is opened.</p>
  
  <p>I know this will require server side scripting and i am curious where to start.
  My idea was to add a simple counter.txt file with only a 0 to start with. And some script should edit the file by adding +1 every time the animation is completed. But that would also require to reload counter.txt every time it is edited, otherwise it wouldn't be seen live by the user.</p>
  
  <p>Do you guys have any brilliant idea's?</p>