Css translate expand on click

by amindunited

HTML

<div class="wrap">
  <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    <li>06</li>
    <li>07</li>
    <li>08</li>
    <li>09</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
  </ul>
</div>

CSS

.wrap {
  height: 85px;
  width: 90%;
  overflowX: scroll;
  white-space: nowrap;
}
ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.wrap ul li {
  text-align: center;
  line-height: 80px;
  height: 80px;
  width: 60px;
  border: solid 1px #efefef;
  border-radius: 3px;
  display: inline-block;
}

.wrap ul li.selected {
  background-color: rgba(255, 255, 0, .5);
  animation:         swoosh 500ms ease-in-out;
}

@keyframes swoosh {
   0%   { transform: scale(.9) translate(5%, 5%);}
  10%   { transform: scale(.8) translate(7%, 7%); }
  20%   { transform: scale(.7) translate(10%, 10%); }
  30%   { transform: scale(.9) translate(20%, 20%); }
  40%   { transform: scale(1) translate(30%, 30%); }
  50%   { transform: scale(1.2) translate(40%, 40%); }
  60%   { transform: scale(1.4) translate(50%, 50%); }
  70%   { transform: scale(1.6) translate(60%, 60%); }
  80%   { transform: scale(1.8) translate(70%, 70%); }
  90%   { transform: scale(1.5) translate(80%, 80%); }
  99%   { transform: scale(1) translate(100%, 100%);}
}

JavaScript

var listElements = document.querySelectorAll('.wrap ul li');
listElements.forEach(function (el, index, arr) {
	console.log('booop', el);
  el.addEventListener('click', function (e) {
  	var previous = document.querySelectorAll('.wrap ul li.selected');
    previous.forEach(function (pEl) { pEl.classList.remove('selected'); } );
		e.target.classList.toggle('selected');
  });
})