Simple animations can also be created using CSS.
This is achieved by changing the given styles to the element, they gradually move from one style to another. At the end of the animation, they always return to the initial value.
In order to create an animation we have to use @keyframes Rule which describes the properties we want to create. Also when using @keyframes we have to add an animation name to it.

Example CSS Animation


<!DOCTYPE html>
<html>
 <head>
  <title>CSS animation</title>
  <style>
#content {
   width:90%;
   height:250px;
   background-color:yellow;
}
p {
   font-size:100px;
   color:blue;
}
#square {
   background-color:lime;
   animation-iteration-count: infinite;
   animation-name: arrow;
   animation-duration: 5s;
   position: relative;
}
@keyframes arrow {
   0% { left:0px;}
   50% { left:90%;}
   100% {left:0px;}
}
 </style>
</head>
 <body>

 <div id="content">
 <div id="square">
   <p>⟺</p>
 </div>
 </div>
   
  </body>
</html>




⟺




jsfiddle

By combining real photos and HTML elements, interesting CSS animations can be created, far better than the one in our example, which we created for the sake of explanation.