button animation practice

animation of button moving right - left

by sendil J

HTML

<div class="btnContainer" ng-app="" ng-controller="test">
  <div class="slider" ng-class="{'slider ': !rightSide, 'sliderAni': rightSide}">

  </div>

  <button type="button" ng-click="left()" class="left">
    Left
  </button>
  <button type="button" ng-click="right()" class="right">
    Right
  </button>

</div>

CSS

.btnContainer {
  width: 250px;
  height: 50px;
  background-color: #fff;
  border: 2px solid #F92A82;
  border-radius: 25px;
  padding: 2px 2px;
}

button {
  outline: none;
  cursor: pointer;
}

.slider {
  position: absolute;
  height: 50px;
  width: 125px;
  background-color: #64F58D;
  margin-left: 0px;
  border-radius: 25px;
}

.slideLeft {
  animation-name: moveLeft;
  animation-duration: 0.7s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  /*animation-play-state: paused;*/
}

.sliderAni {
  position: absolute;
  height: 50px;
  width: 125px;
  background-color: #64F58D;
  transform: translate(125px, 0px);
  border-radius: 25px;
  animation-name: moveRight;
  animation-duration: 0.7s;
  animation-iteration-count: 1;
  animation-direction: alternate;
}

@keyframes moveRight {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(0px, 0px);
    width: 250px;
  }
  100% {
    transform: translate(125px, 0px);
  }
}

@keyframes moveLeft {
  0% {
    transform: translate(125px, 0px);
  }
  50% {
    transform: translate(0px, 0px);
    width: 250px;
    float: right;
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.left,
.right {
  color: #595959;
  font-size: small;
  background-color: transparent;
  position: absolute;
  display: inline-block;
  width: 125px;
  height: 50px;
  float: left;
  border: none;
}

.right {
  position: relative;
  float: right;
}

.trans {
  transition: 0.7s ease-in-out;
}

JavaScript

function test($scope) {
  $scope.rightSide = false;
  $scope.left = function() {
    $scope.rightSide = false;


  }
  $scope.right = function() {
    $scope.rightSide = true;
    var result = document.getElementsByClassName("slider");
    angular.element(result).addClass('slideLeft');
  }
}