Анимация текста нижней части страницы

const buttons = document.querySelectorAll('button');
const display = document.querySelector('.display');


buttons.forEach(function(button) {
  button.addEventListener('click', calculate);
});
const operators = ['*', '/','-','+','%','^']
function isOperator(ch) {
 return operators.find(it => it === ch)
}
let lastClickedBtn;
function calculate(event) {
  const clickedButtonValue = event.target.value;
  if(lastClickedBtn === '=') {
    display.value = ''
  }

  if (clickedButtonValue === '=') {  
    if (display.value !== '') {
      let str = display.value
        .replace(/\^/g, "**")
        .replace(/%(\d+(?:\.\d+)?)/g, "*($1/100)");        
        
      display.value = eval( str );
    }    
  } else if(clickedButtonValue === 'BS') {
    display.value = display.value.slice(0, -1);
  } else if (clickedButtonValue === 'C') {  
    display.value = '';
  } else {
    if(display.value.slice(-1) === '*' && clickedButtonValue === '*' && display.value.slice(-2, -1) !== '*') {
      display.value += clickedButtonValue;
    } else if(isOperator(display.value.slice(-1)) && isOperator(clickedButtonValue)) {
        // bad expression
    } else {
      display.value += clickedButtonValue;
    }
  }

  lastClickedBtn = clickedButtonValue;
}



function soundClick() {
  var audio = new Audio(); 
  audio.src = ''; 
  audio.autoplay = true; 
}
function soundClick2() {
  var audio = new Audio(); 
  audio.src = 'https://www.myinstants.com//media/sounds/0447-mp3cut.mp3'; 
  audio.autoplay = true; }

const s = window.screen;
const w = (q.width = s.width);
const h = (q.height = s.height);
const ctx = q.getContext("2d");

const p = Array(Math.floor(w / 10) + 1).fill(0);

const random = (items) => items[Math.floor(Math.random() * items.length)];

const hex = "Vuqar Selim Rafayel".split("");

setInterval(() => {
  ctx.fillStyle = "rgba(0,0,0,.05)";
  ctx.fillRect(0, 0, w, h);
  ctx.fillStyle = "#0f0";
  p.map((v, i) => {
    ctx.fillText(random(hex), i * 10, v);
    p[i] = v >= h || v > 50 + 10000 * Math.random() ? 0 : v + 10;
  });
}, 1000 / 30);

const spans = document.querySelectorAll('.word span');

spans.forEach((span, idx) => {
    span.addEventListener('click', (e) => {
        e.target.classList.add('active');
    });
    span.addEventListener('animationend', (e) => {
        e.target.classList.remove('active');
    });
    
    // Initial animation
    setTimeout(() => {
        span.classList.add('active');
    }, 750 * (idx+1))
});

* {
  padding: 0;
  margin: 0;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #222831;
  font-family: sans-serif;
}

.calculator {
  width: 300px;
  padding-bottom: 15px;
  border-radius: 7px;
  background-color: rgb(0, 0, 0);
  box-shadow: 5px 8px 8px -2px rgba(0, 0, 0, 0.61);
  position: absolute;
}

.display {
  width: 100%;
  height: 80px;
  border: none;
  box-sizing: border-box;
  padding: 10px;
  font-size: 2rem;
  background-color: #f8d407;
  color: rgb(0, 0, 0);
  text-align: right;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.row {
  display: flex;
  justify-content: space-between;
}

button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  outline: none;
  font-size: 1.5rem;
  background-color: rgb(34, 34, 34);
  color: #fff;
  margin: 10px;
}

button:hover {
  cursor: pointer;
}

.operator {
  background-color: #888888;
  color: rgb(0, 0, 0);
}

@import url('https://fonts.googleapis.com/css?family=Anton|Roboto');

header {
  
  
}
.word {
    font-family: 'Anton', sans-serif;
    perspective: 1000px;
    position: absolute;
    top: 20px;
    z-index: 999;
}

.word span {
    cursor: pointer;
    display: inline-block;
    font-size: 100px;
    user-select: none;
    line-height: .8;
}

.word span:nth-child(1).active {
    animation: balance 1.5s ease-out;
    transform-origin: bottom left;
}

@keyframes balance {
    0%, 100% {
        transform: rotate(0deg);
    }
    
    30%, 60% {
        transform: rotate(-45deg);
    }
}

.word span:nth-child(2).active {
    animation: shrinkjump 1s ease-in-out;
    transform-origin: bottom center;
}

@keyframes shrinkjump {
    10%, 35% {
        transform: scale(2, .2) translate(0, 0);
    }
    
    45%, 50% {
        transform: scale(1) translate(0, -150px);
    }
    
    80% {
        transform: scale(1) translate(0, 0);
    }
}

.word span:nth-child(3).active {
    animation: falling 2s ease-out;
    transform-origin: bottom center;
}

@keyframes falling {
    12% {
        transform: rotateX(240deg);
    }
    
    24% {
        transform: rotateX(150deg);
    }
    
    36% {
        transform: rotateX(200deg);
    }
    
    48% {
        transform: rotateX(175deg);
    }
    
    60%, 85% {
        transform: rotateX(180deg);
    }
    
    100% {
        transform: rotateX(0deg);
    }
}

.word span:nth-child(4).active {
    animation: rotate 1s ease-out;
}

@keyframes rotate {
    20%, 80% {
        transform: rotateY(180deg);
    }
    
    100% {
        transform: rotateY(360deg);
    }
}

.word span:nth-child(5).active {
    animation: toplong 1.5s linear;
}

@keyframes toplong {
    10%, 40% {
        transform: translateY(-48vh) scaleY(1);
    }
    
    90% {
        transform: translateY(-48vh) scaleY(4);
    }
}


body {
    background-color: skyblue;
    color: #fff;
    display: flex;
    font-family: 'Roboto', sans-serif;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: 100vh;
    margin: 0;
}

.fixed {
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    letter-spacing: 1px;
}

footer i {
    color: red;
}

footer a {
    color: #3C97BF;
    text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <link rel="stylesheet" type="text/css" href="css/fon.css">
  <title>Calculator</title>
  <canvas id=q></canvas>
  
</head>


    
<body>
  

  <audio src="" autoplay="autoplay" loop="true" >
    Ваш браузер не поддерживает теги <audio> </audio>! Обновите версию браузера!
    </audio>
  <div class="word">
    <span>M</span>
    <span>A</span>
    <span>N</span>
    <span>G</span>
    <span>U</span>
</div>
  <div class="calculator">

    

    <input type="text" class="display" disabled>

    

    <div class="keys">

      

      <div class="row">
        <p onclick="soundClick2()"><button value="7">7</button></p>
        <p onclick="soundClick2()"><button value="8">8</button></p>
        <p onclick="soundClick2()"><button value="9">9</button></p>
        <p onclick="soundClick2()"><button value="+" class="operator">+</button></p>
      </div>
      <div class="row">
        <p onclick="soundClick2()"><button value="4">4</button></p>
        <p onclick="soundClick2()"><button value="5">5</button></p>
        <p onclick="soundClick2()"><button value="6">6</button></p>
        <p onclick="soundClick2()"><button value="-" class="operator">-</button></p>
      </div>
      <div class="row">
        <p onclick="soundClick2()"><button value="1">1</button></p>
        <p onclick="soundClick2()"><button value="2">2</button></p>
        <p onclick="soundClick2()"><button value="3">3</button></p>
        <p onclick="soundClick2()"><button value="*" class="operator">*</button></p>
      </div>
      <div class="row">
        <p onclick="soundClick2()"><button value="C" style= color:red>C</button></p>
        <p onclick="soundClick2()"><button value="0">0</button></p>
        <p onclick="soundClick2()"><button value="/" class="operator">/</button></p>
        <p onclick="soundClick()"><button value="=" class="operator">=</button></p>    
      </div>
      <div class="row">
        <p onclick="soundClick2()"><button value="(" class="operator">(</button></p>
        <p onclick="soundClick2()"><button value=")" class="operator">)</button></p>
        <p onclick="soundClick2()"><button value="^" class="operator">^</button></p>
        <p onclick="soundClick2()"><button value="BS" class="operator">&larr;</button></p>
      </div>
    </div>
    


  </div>

  


  <script type="text/javascript" src="js/scripts.js"></script>
</body>



</html>