JSFiddle - React, Tailwind, and code Playground

HTML

<div id="keyboard">
                    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                         width="527px" height="497px" viewBox="0 0 527 497" enable-background="new 0 0 527 497" xml:space="preserve">
                      <g id="Shadow_37_" opacity="0.1686">
                        <g>
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M495.819,241.5H30.323c-15.58,0-28.213,12.632-28.213,28.213v197.483
                            c0,15.58,12.633,28.212,28.213,28.212h465.496c15.582,0,28.213-12.632,28.213-28.212V269.713
                            C524.032,254.132,511.401,241.5,495.819,241.5z"/>
                        </g>
                      </g>
                      <g id="Body_7_">
                        <g>
                          <path fill-rule="evenodd" clip-rule="evenodd" fill="#D9D9D9" d="M495.819,227.394H30.323c-15.58,0-28.213,12.632-28.213,28.213
                            v197.482c0,15.581,12.633,28.213,28.213,28.213h465.496c15.582,0,28.213-12.632,28.213-28.213V255.606
                            C524.032,240.025,511.401,227.394,495.819,227.394z"/>
                        </g>
                      </g>
                      <g id="Wire">
                        <g>
                          <rect x="256.019" y="1.699" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" width="28.212" height="225.695"/>
                        </g>
                      </g>
                      <g id="Shadow_38_" opacity="0.3098">
                        <g>
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M284.23,213.29h-28.212v14.104h28.212V213.29z M411.186,424.877H157.276
                            c-7.795,0-14.106,6.323-14.106,14.106v14.105c0,7.797,6.311,14.107,14.106,14.107h253.909c7.797,0,14.104-6.311,14.104-14.107
                            v-14.105C425.289,431.2,418.982,424.877,411.186,424.877z...

CSS

body {
    background:#000
}


#keyboard {
  max-width:525px;
  margin:0 auto;
}

.active-key{
  animation: keypress linear 0.3s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: keypress linear 0.3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: keypress linear 0.3s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: keypress linear 0.3s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: keypress linear 0.3s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes keypress{
  0% {
    transform:  translate(0px,0px)  ;
  }
  50% {
    transform:  translate(0px,14px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes keypress{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  50% {
    -moz-transform:  translate(0px,14px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes keypress {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  50% {
    -webkit-transform:  translate(0px,14px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes keypress {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  50% {
    -o-transform:  translate(0px,14px)  ;
  }
  100% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes keypress {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  50% {
    -ms-transform:  translate(0px,14px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}

JavaScript

var divs = $('#keyboard .key');
    (function cycle() {

        setTimeout(function() {
            var index = Math.floor(Math.random() * divs.length);
            divs.removeAttr('class', 'active-key')
                .eq(index).attr('class', 'active-key');
            cycle();
        }, 1000);
        
    })();