learn css animation

CSS
Read this helpful, short and straightforward article to learn CSS animation perfectly.

https://medium.com/@Cafe_Code/learn-css-animation-asap-as-simple-as-possible-374b7874d4dd<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div><p>you can add text in this box or anithing else like a pictrue</p></div>

</body>
</html><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>//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;}
     } CSS animation properties template:
{
   animation-name: anima-name;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
    animation-direction: reverse | normal | alternate | alternate-reverse ; 
  animation-timing-function: ease | ease-out | ease-in | ease-in-out | linear | cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)); 
  animation-fill-mode:forwards | backwards | both | none;
}
@keyframes anima-name {
  from {
   background-position:right;
  }
  to {
    background-position:left;
  }
}
@keyframes anima-name {
  0% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  100% {
    background-color: red;
  }
}
@-webkit-keyframes pulse {
 0% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
 33% {
   background-color: blue;
   opacity: 0.75;
   -webkit-transform: scale(1.1) rotate(-5deg);
 }
 67% {
   background-color: green;
   opacity: 0.5;
   -webkit-transform: scale(1.1) rotate(5deg);
 }
 100% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
}

.pulsedbox {
 -webkit-animation-name: pulse;
 -webkit-animation-duration: 4s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-in-out;
}
Source