keyframe css animation example

Example 1: css keyframes animation

//css keyframes
#image{
	  width: 100px;
	  height: 100px;
	  background-color: red;
	  position: relative;
	  animation: monFrame 5s linear 2s infinite alternate;

	}
	@keyframes monFrame {
	  0%   {left:0px; top:0px;}
	  25%  {left:500px; top:0px;}
	  50%  {left:500px; top:500px;}
	  75%  {left:0px; top:500px;}
	  100% {left:0px; top:0px;}
     }

Example 2: css animation

<style>

  #ball {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    /*"Call" the animation "function" */
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    /* Normal, reverse, alternate(between the fwd and back) 
    and alternate-reverse */
    animation-direction: reverse; 
    /* Ease is deafault, use cubic-bezier(n,n,n,n) for custom */
    animation-timing-function: linear; 
    
    /* if you want something to display from hidden
       set the opacity to 0 and in the keyframe steps bring
   	   the opacity to 1 gradually to stop it flashing */
  }
	
  /* The animation "bounce" */
  @keyframes bounce{
    /* start */
    0% {
      top: 0px;
    }
    /* step (you can add multiple incremental steps from 1-100) */
    50% {
      top: 249px;
      width: 130px;
      height: 90px;
    }
    /* end (you can count down from 100 to 0 too) */
    100% {
      top: 0px;
    }
  }
</style>

<div id="ball"></div>