CODE EXAMPLE FOR CSS

animation css explained

<!-Here we have a button that will animate a circle within it-->
<!--This is the HTML Element to Animate, Its parent is the HTML Body Element-->
<button>     
   Refresh the Screen <span class="circle" style="top: 27px; left: 82px"></span>
</button>

/* css for animatiing a circle inside a button to expand see video below */
button .circle{
  position: absolute; /*Positioned absolute inside the parent element, button*/
  background-color: white;
  width: 100px;
  height: 100px;
  border-radius: 50%;/*turns the item into a circle*/
  transform: translate(-50%, -50%) scale(0); /*scales it down to nothing, moves it
  											  along the x and y axis from origin*/  
  animation: circle-animation 0.5s ease-out; /*animation name, time, effect*/
}
@keyframes circle-animation {
  to{
    /*The Item is scaled out with the ease out effect above*/
    transform: translate(-50%, -50%) scale(3); /*scales the circle to ripple out*/
    opacity: 0; /*Then the circle disappears./*
  }  
}