.menuBar {
    background-color: black;
    color: white;
    position: fixed;
    z-index: 5;
    height: 100%;
    width: 170px;
    text-align: end;
    padding-right: 20px;
    transform: translateX(-90px);
    transition: all 1s;
  }
  
  .menuBar:hover {
    transform: translateX(0px);
    text-align: center;
  }
  
  .ex1 {
    margin-top: 50px;
    background-color: powderblue;
    width: 300px;
    font-size: 24px;
    margin: auto;
  }
  .ex1:hover {
    animation-name: move;
    animation-duration: 1s;
  }
  .ex2 {
    margin: 150px auto;
    text-align: center;
    font-size: 70px;
    width: 84px;
    cursor: pointer;
  }
  .ex2:hover {
    animation-name: plus;
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }
  @keyframes move {
    25% {
      transform: rotate(-10deg);
    }
    50% {
      transform: rotate(10deg);
    }
    75% {
      transform: rotate(-10deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  @keyframes plus {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(-15deg);
    }
    100% {
      transform: rotate(45deg) scale(1.5);
    }
  }