CSS animation example

HTML

<div id="animatedText">
Animation happens here
</div>

<script>

  function startanimation(element) {

    element.classList.add("animateDescriptor");

    element.addEventListener( "animationend",  function() {

      element.classList.remove("animateDescriptor");  	

    } );

  }

</script>


<button onclick="startanimation( document.getElementById('animatedText') )">
Click to animate above text
</button>

CSS

@keyframes fadeinout {	
	  from { color: #000000; } 	
    25% {color: #0000FF; }	
    50% {color: #00FF00; }	    
    75% {color: #FF0000; }	
	  to { color : #000000; }	
  }	
    	
  .animateDescriptor {	
    animation: fadeinout 1.0s;	
  }