Edit in JSFiddle

  p {
    -webkit-animation: roll 3s infinite alternate linear;
    animation: roll 3s infinite alternate linear;
    width: 80px;
    height: 80px;
    position: relative;
    background: goldenrod;
    line-height: 80px;
    text-align: center;
    font-family: helvetica, arial, sans-serif;
    font-weight: bold;
    border-radius: 50% 50%;
    border: 4px solid red;
  }
  @keyframes roll {
    from {
      left: 0;
    }
    to{
      transform: rotate(720deg);
      left: calc(100% - 80px);
    }
  }
  @-webkit-keyframes roll {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      left: 0;
    }
    to{
      -webkit-transform: rotate(720deg);
      transform: rotate(720deg);
      left: calc(100% - 80px);
    }
  }

<p>DRUM</p>