CSS3 Animation

Animating buton using CSS3 and Javascript

HTML

<button class="btn" id="btn-ltr" value="ltr">Move To Right + Reverse</button>
<button class="btn" id="btn-rotate" value="rotate">Rotate 360</button>
<button class="btn" id="btn-ttb" value="ttb">Move To Bottom + Reverse</button>

CSS

button {
  position:relative;
  display:block;
  margin:10px auto;
}

@keyframes round {
  0% {
    top: 25%;
    left: 25%;
    transform: rotateZ(0deg);
  }
  25% {
    top: 25%;
    left: 75%;
    transform: rotateZ(360deg);
  }
  50% {
    left: 75%;
    top: 75%;
    transform: rotateZ(0deg);
  }
  75% {
    left: 25%;
    top: 75%;
    transform: rotateZ(360deg);
  }
  100% {
    left: 25%;
    top: 25%;
    transform: rotateZ(0deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@keyframes ltr {
  0% {
    left:0px;
  }
  50% {
    left:70px;
  }
  100% {
    left:0px;
  }
}
@keyframes ttb {
  0% {
    top: 0px;
  }
  50% {
    top: 50px;
  }
  100%{
    top: 0px;
  }
}

JavaScript

var elements = document.getElementsByClassName('btn');
  for (var element in elements) {
    elements[element].onmouseover = function() {
    	var btn = this;
      console.log(btn.value);
      btn.setAttribute("style","animation:"+btn.value+" 2s");
      setTimeout(function() {
        btn.removeAttribute("style");
      }, 2000);
    };

  }