<div class="zahra">

</div>
.zahra {
  width: 50px;
  height: 50px;
  background: green;
  float: right;
  position: absolute;
  top: 20px;
  left: 0px;
}
@keyframes move {
  from {
    left: 50px;
  }
  to {
    left: 100px;
  }
}
.zahra {
  animation-name: move;
  animation-duration: 2s;
  animation-iteration-count: 100000;
  animation-direction: alternate;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.