javascript - Count total amount of completed CSS animations -

on webpage have small simple wheel-like icon in top navigation bar rotates 360 degree on hover , when mouse removed via css code:

.img-wheel{ border-radius: 50%; border:5px solid <?php echo $nav_text_color; ?>; -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); 

i want counter next shows how many times completed whole animation (or, if easier, how many times hovered on wheel). preferable absolute total, user 1 hovered once , counter adds +1, user 2 opens site counter on 1, user 2 hovers once , show 2. user 1 comes site , sees counter on 2.

since wheel in navigation bar counter shouldn't reset when page opened.

i know require server side scripting , curious start. idea add simple counter.txt file 0 start with. , script should edit file adding +1 every time animation completed. require reload counter.txt every time edited, otherwise wouldn't seen live user.

do guys have brilliant idea's?

if understand correctly, want have element on page changes users when user interacts it.

i suggest build js function changes class of wheel element change animation, , have ajax post against server in same hit. next issue storing data, need sort of shared data store, database or key-value server you're going need store identifier (of sort) , call count of rows counter. advise against file, you're race conditions on single text file.