How CSS implements Caterpillar crawl action code sharing

Caterpillar as a child has seen, today think of to write a crawling action, we first look at, the specific code is as follows:

HTML code:

<p class= ' container ' >  <p class= ' hide left ' ></p>  <p class= ' Hide right ' ></p>  <p class= ' Hide bottom ' ></p>  <p class= ' Circle-container ' >    <p class= ' Circle ' > </p>  </p></p>

CSS code:

 <style>body {background-color: #1B6CB2; margin:0;}.  container {position:absolute;  width:600px;  height:400px;  Overflow:hidden;  top:50%;  left:60%; Transform:translate (-50%,-50%);}.  hide {height:100%;  width:150px;  Background: #1B6CB2;  Position:absolute; Z-index:2;}. hide.left {left:0;}. hide.right {right:0;}.  Hide.bottom {bottom:0;  width:100%; height:50%;}.  Circle {position:absolute;  height:75px;  width:150px;  border:3px solid white;  border-radius:50%/100% 100% 0 0;  Border-bottom:none;  top:40%;  left:50%;  transform-origin:0% 50%;  Transform:translate (-50%,-50%); Animation:magic 1.8s ease Infinite;}  @keyframes Magic {0% {transform:rotate ( -170deg) Translate (-50%,-50%);  } 50% {transform:rotate (0deg) Translate (-50%,-50%);  } 100% {transform:rotate (180deg) Translate (-50%,-50%);  }}.circle-container {position:absolute;  height:75px;  width:150px;  top:40%;  left:50%;  transform-origin:0% 50%; TransfoRm:translate (-50%,-50%); Animation:power 1.8s ease-out Infinite;}  @keyframes Power {0% {margin-left:20px;  } 50% {margin-left: -55px;  } 99.9% {margin-left: -130px;  } 100% {margin-left:20px; }} </style>